过滤数组后在angularjs中使用数组项进行动态路由 [英] dynamic routing with array item in angularjs after filtering array

问题描述

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

I have a problem with my angularjs app where my app is routing to the wrong page when using an ng-repeat array to determine the route.

数据如下所示，并可以在人员控制器中进行访问:

data looks like this and is accessed in the person 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 :(定位标记根据其在数组中的索引链接到该人(我认为这可能是我需要更改以解决此问题的方法，但我不确定)

html: (the anchor tag links to the person based on their index in the array (I believe this may be what I need to change to fix the problem, but I'm not sure)

<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>

从角度路由:(带有'/person/:itemId'的路由正在路由到特定用户的页面，在页面中他们在数组中的索引确定了他们的ID)

Routing from angular: (the route with '/person/:itemId' is routing to a page specific to a specific user, where their index in the array determines their 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');
});

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

Here is the controller for the dynamic page. It works perfectly for the original array, but once I attempt to sort the array, the index no longer corresponds to the correct student.

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侧更新，并且它们不对应于原始数组.因此，路由会将它们发送到错误的页面.

So the functional problem is that the index applies to the first student in the large array of data. It appears to work perfectly, and the correct data populates the page, but when I use the html/text input to filter the list, the original indices are updated on the html side, and they do not correspond to the original array. So the routing sends them to the wrong page.

即使是经过过滤的列表，如何使路由工作正常?

How can I make the routing work even for a filtered list?

推荐答案

一种方法，您可以通过使用以下函数来实现:该函数可为您返回每个学生在原始数组中为每个学生所拥有的索引在您的ng-repeat中.

One way you can do this is by using a function which returns you the index a student had in the original array for each student in your ng-repeat.

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

然后您可以像下面这样调用列表中的函数:

You can then call the function in your list like:

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

这并不是您可以想象的性能最高的代码.

This though is not quite the most performant code you could imagine.

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

Another way would be to just temporarily store the index of the student as a property and use that one to reference it, again not quite the nicest solution:

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

    return student;
});

在列表中:

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

但是，如果您可以通过某种方式为学生分配一个唯一的ID，那肯定是首选的方式.这样，您还可以确保始终引用同一位学生.如果您的students.json在创建列表的时间与用户单击某项的时间之间有所变化，则可能会再次引用错误的内容...

However, if you can somehow assign the students a unique id that would definitely be the preferred way. That way you also make sure that you always reference the same student. If your students.json somehow changes between the time you create the list and the time the user clicks on an item you may reference the wrong one again...

在链接中包含占位符时，请始终使用 ng-href . Angular API文档

By the way always use ng-href when including placeholders in the link. Why you should do so is well described in the Angular API docs:

在href属性中使用{{hash}}之类的Angular标记会使链接转到错误的URL，前提是用户在Angular有机会用其值替换{{hash}}标记之前单击链接.在Angular替换标记之前，链接将断开，并且很可能会返回404错误. ngHref指令解决了这个问题.

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中使用数组项进行动态路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！