Question

我想从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>

列表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);
  }
});

提前谢谢。

Answer 1

问题是你是通过函数参数传递依赖关系，这是不需要的＆amp;不要违反图片中有DI的规律。

只需从list＆amp;中移除参数即可在调用该函数时不要传递它。

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

    angular.extend($scope, friend);
}

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

注意：以下说明仅指出当前实施中缺少的内容。不喜欢在任何意义上实现它。

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

更新/重构代码

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);
  }
});

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

Answer 2

＆＃13;

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;
      } ;
    }); 
}

＆＃13;

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>

＆＃13;

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

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

2 个答案: