javascript - 过滤数组后在angularjs中使用数组项进行动态路由

Question

我的 angularjs 应用程序有问题，在使用 ng-repeat 数组确定路由时，我的应用程序路由到错误的页面。

数据看起来像这样并在个人 Controller 中访问:

[
  {
    "name":"AJ lastname",
    "img_name":"AJ_lastname",
    "location":"Baltimore, Maryland",
    "info":"stuff"
  },
  {
    "name":"Albert lastname",
    "img_name":"Albert_lastname",
    "location":"Boston, Massachusetts",
    "info":"stuff"
  } // ... more data
]

html:( anchor 标记链接到基于他们在数组中的索引的人(我相信这可能是我需要更改以解决问题的内容，但我不确定)

<ul class="main-list">
  <li class="list-item fade" ng-repeat="student in students | filter:filter">
    <a href="/#person/{{$index}}">
    <img class="portrait listimg" ng-src="/images/{{student.img_name}}.jpg" alt="portrait of {{student.name}}">
    <h2>{{student.name}}</h2>
    <h4>{{student.location}}</h4>
    </a>
  </li>
</ul>

从 Angular 路由:(带有'/person/:itemId'的路由路由到特定于特定用户的页面，他们在数组中的索引决定了他们的id)

app.config(function ($routeProvider, $httpProvider) {
  $routeProvider
    .when('/list', {
      templateUrl: './js/templates/list.html',
      controller: 'ListController'
    })
    .when('/person/:itemId', {
      templateUrl: './js/templates/person.html',
      controller: 'PersonController'
    })
    .otherwise('/list');
});

这是动态页面的 Controller 。它适用于原始数组，但一旦我尝试对数组进行排序，索引就不再对应于正确的学生。

app.controller('PersonController', function ($scope, $http, $routeParams) {
  $scope.person = 'Someone\'s name';
  $http.get('../js/students.json').success(function (data) {
    $scope.allStudents = data;
    $scope.studentId = $routeParams.itemId;
    $scope.student = data[$scope.studentId];
  });

所以功能问题是索引适用于大数据数组中的第一个学生。它似乎工作完美，正确的数据填充了页面，但是当我使用 html/文本输入来过滤列表时，原始索引在 html 端更新，并且它们不对应于原始数组。所以路由将它们发送到错误的页面。

我怎样才能使路由即使对于过滤列表也能正常工作？

Answer 1

一种方法，您可以使用一个函数，该函数返回您在 ng-repeat 中每个学生的原始数组中的索引。

$scope.getIndex = function(student) {
    return $scope.students.indexOf(student);
}

然后您可以调用列表中的函数，例如:

<a ng-href="/#person/{{getIndex(student)}}">

虽然这并不是您能想象到的性能最高的代码。

另一种方法 只是暂时将学生的索引存储为属性并使用该索引来引用它，这同样不是最好的解决方案:

$scope.students = $scope.students.map(function(student, index) {
    student.index = index;

    return student;
});

在列表中:

<a ng-href="/#person/{{student.index}}">

但是，如果您能以某种方式为学生分配一个唯一的 ID，那绝对是首选方式。这样你也可以确保你总是引用同一个学生。如果您的 students.json 在您创建列表和用户点击某个项目之间发生了某种变化，您可能会再次引用错误的项目...

顺便一提总是使用ng-href在链接中包含占位符时。为什么你应该这样做在 Angular API docs 中有很好的描述。 :

Using Angular markup like {{hash}} in an href attribute will make the link go to the wrong URL if the user clicks it before Angular has a chance to replace the {{hash}} markup with its value. Until Angular replaces the markup the link will be broken and will most likely return a 404 error. The ngHref directive solves this problem.