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

【问题标题】：Passing id from one page to another in angularjs在angularjs中将id从一个页面传递到另一个页面
【发布时间】：2016-03-24 18:24:25
【问题描述】：

我想从 list.html 页面获取 id 并使用相同的 id 在 list-detail.html 页面上显示详细信息。我刚开始使用 angularjs。我无法根据 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);
  }
});

提前谢谢你。

【问题讨论】：

标签： javascript angularjs json ionic-framework angular-ui-router

【解决方案1】：

问题是您通过函数参数传递依赖项，这是不需要的，并且不要违反图片中有 DI 的规律。

只需从list 中删除参数，并且在调用该函数时不要传递它。

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

    angular.extend($scope, friend);
}

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

注意：下面的描述只是为了指出当前实现中缺少的内容。没有任何意义想要实现它。

虽然真正的问题是在调用像 list($scope, $stateParams,$http); 这样的列表函数时，您传递了 3 个参数，而列表函数只需要两个像 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}}

【讨论】：

Hello pankaj..i 听从了您的建议，但列表详细信息页面上仍然看不到数据，只有 {{id}}{{name}} 等以这种格式可见，而不是名称或来自 json 数组的 id...
@pankaj...我尝试了更新的代码..仍然没有运气..在列表详细信息页面上没有看到任何输出...如果您将完整的更正代码发送给我，您会很好也包括其他页面的更改..我可能会犯一些错误..提前谢谢你。
你能创造出相同的 plunker 吗？有可重现的问题。
@Kaushik 我让你创建一个工作 plunkr 来演示你的问题陈述......但似乎没有工作......
在 plunkr 中添加的文件运行不正常..Ionic 应用程序没有在其中运行...还有其他方法可以将文件发送给您吗？像 rar 或 zip smthng。 .??

【解决方案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>

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

【讨论】：

@batman..我尝试了你的建议，但它不起作用。请你详细说明你做了什么，特别是 list-detail.html 页面。
我已经通过url发送了朋友的id。我调用了一个以朋友对象作为参数的函数，并且我使用 $stateParams.id 获取了 ID。当页面加载时，我从 list-details.html 调用了 getDetails() 函数。