在angularjs中将id从一个页面传递到另一个页面

I want to take id from list.html page and use the same id to display the details on the list-detail.html page.I just started using angularjs.I am not able to display the details based on id. This is my code: index.html

我想从list.html页面获取id并使用相同的id在list-detail.html页面上显示详细信息。我刚开始使用angularjs.I我无法显示基于id的详细信息。这是我的代码:index.html

    <body ng-app="myAppnew">
        <h1>Friends</h1>
        <section ui-view></section>
      </body>

list.html

<ol>
  <ul ng-repeat="friend in friends">
   <a ui-sref="listDetail({Id: friend.id})">{{friend.name}}</a>
  </ul>
</ol>

list-detail.html

<h1>Friend Detail</h1>
{{id}}<br />
{{name}}<br />
{{imageLocation}}<br />

app.js

var myApp = angular.module('myAppnew', ['ui.router']);
myApp.config(function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise('/');
  $stateProvider
    .state('list', {
      url: '/',
      templateUrl: 'list.html',
      controller: 'mainCtrl'
    })
    .state('listDetail', {
      url: '/:Id',
      templateUrl: 'list-detail.html',
      controller: 'mainCtrl'
    });
});

myApp.controller('mainCtrl', function($scope, $stateParams,$http) {
  console.log(arguments);
    $http.get("http://www.fashto.in/rest/getmaincategories").then(function (response) 
                                                           {
         $scope.friends = response.data;
              });


  function findFriend(id){
    var targetFriend = null;
    $scope.friends.forEach(function(friend){
      console.log("Test",friend.id,id,friend.id === id)
      if (friend.id === id) targetFriend = friend;
    }); 
    return targetFriend;
  }


  function list($scope, $stateParams) {
    var friend = findFriend(parseInt($stateParams.Id));

    angular.extend($scope, friend);
  }

  if ($stateParams.Id) {
    list($scope, $stateParams,$http);
    console.log($scope);
  }
});

Thank you in advance.

先谢谢你。

2 个解决方案

#1

The problem is you are passing dependencies through function parameter which isn't ever needed & don't disobey the law of having DI in picture.

问题是你通过函数参数传递依赖关系,这是不需要的,并且不违反在图片中使用DI的规律。

Just remove parameter from list & don't pass it while calling that function.

只需从列表中删除参数,并在调用该函数时不传递它。

function list() {
    var friend = findFriend(parseInt($stateParams.Id));

    angular.extend($scope, friend);
}

if ($stateParams.Id) {
    list();
    console.log($scope);
}

NOTE: Below description is just to pointing out what was missing in current implementation. No preferring to implement it any sense.

注意:下面的描述只是指出当前实现中缺少的内容。不喜欢任何意义上的实现。

Though the real problem was while calling list function like list($scope, $stateParams,$http); you were passing 3 parameters & list function was expecting only two parameters that was mess like function list($scope, $stateParams) {, You should either add/remove single parameter from either place.

虽然真正的问题是在调用列表函数时如list($ scope,$ stateParams,$ http);你传递了3个参数和list函数只期望两个参数像函数列表一样混乱($ scope,$ stateParams){,你应该从任何一个地方添加/删除单个参数。

Updated/Refactored Code

myApp.controller('mainCtrl', function($scope, $stateParams, $http) {
  //creating promise here
  var friendsPromise = $http.get("http://www.fashto.in/rest/getmaincategories").then(function(response) {
    $scope.friends = response.data;
  });


  function findFriend(id) {
    var targetFriend = null;
    //wait till promise resolve
    friendsPromise.then(function() {
      $scope.friends.forEach(function(friend) {
        if (friend.id === id)
          scope.friend = friend; //set current friend.
      });
    });
  }

  function list() {
    findFriend(parseInt($stateParams.Id));
  }

  if ($stateParams.Id) {
    list();
    console.log($scope);
  }
});

Then on view do {{friend}}/{{friend.id}}

然后在视图上{{friend}} / {{friend.id}}

#2

var myApp = angular.module('myAppnew', ['ui.router']);
myApp.config(function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise('/');
  $stateProvider
    .state('list', {
      url: '/',
      templateUrl: 'list.html',
      controller: 'mainCtrl'
    })
    .state('listDetail', {
      url: '/:Id',
      templateUrl: 'list-detail.html',
      controller: 'mainCtrl'
    });
});

 $scope.viewFriendDetails = function(friend) {
      $state.go('listDetail', {
        Id: friend.id
      });
    };

$scope.getDetails=function() {
$scope.friends.forEach(function(friend){  
      if (friend.id === parseInt($stateParams.Id)) {
        $scope.value=friend;
      } ;
    }); 
}

list.html

<ul>
  <li ng-repeat="friend in friends" ng-click="viewFriendDetails(friend)">
                {{friend.name}}
  </li>
</ul>

list-detail.html

ng-init="getDetails()"

<ul>
  <li>{{value.name}}</li>
  <li>{{value.id}}</li>
</ul>

you have to call getDetails function when the list-detail.html page is loading.i think this will work as you needed.

当list-detail.html页面加载时你必须调用getDetails函数。我认为这将按你的需要工作。

#1