过滤数组后 angularjs 中数组项的动态路由

Question

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

数据看起来像这样并在个人控制器中访问：

[
  {
    "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：（锚标记根据数组中的索引链接到此人（我相信这可能是我需要更改以解决问题的内容，但我不确定）

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

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

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/text 输入过滤列表时，原始索引在 html 端更新，它们不对应原始数组。所以路由将它们发送到错误的页面。

我怎样才能使路由在过滤后的列表中也能正常工作？

Answer 1

您正在使用 $scope 上名为 students 的某个对象创建 ng-repeat，对吗？如果这是从与您的控制器中相同的 students.json 构建的，那么它们的学生 ID 在逻辑上应该是等效的。因此，只需将 href 从“/#person/{{$index}}”更改为“/#person/{{student.studentId}}”。

如果由于某种原因它们不相同，那么当您创建学生对象时，您可以添加一个新属性 studentId，它保存数组中索引的值，然后使用之前的建议。

请记住，在使用 ng-repeat 时，如果您有相同的对象，它会抛出错误，因此您必须向其添加 "track by $index"。

Answer 2

一种方法你可以通过使用一个函数returns你在你的[=14]中的每个学生的原始数组中索引一个学生=].

$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 when including placeholders in the link. Why you should do so is well described in the 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.

过滤数组后 angularjs 中数组项的动态路由

dynamic routing with array item in angularjs after filtering array

javascript

angularjs

angularjs-filter

mvw