过滤数组后，angularjs中数组项的动态路由 [英] dynamic routing with array item in angularjs after filtering array

问题描述

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

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

<预><代码>[{"name":"AJ 姓氏","img_name":"AJ_lastname","location":"马里兰州巴尔的摩",信息":东西"},{"name":"艾伯特姓氏","img_name":"Albert_lastname","location":"马萨诸塞州波士顿",信息":东西"}//...更多数据]

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

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

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

app.config(function ($routeProvider, $httpProvider) {$routeProvider.when('/列表', {templateUrl: './js/templates/list.html',控制器:'列表控制器'}).when('/person/:itemId', {templateUrl: './js/templates/person.html',控制器:'PersonController'}).否则('/列表');});

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

app.controller('PersonController', function ($scope, $http, $routeParams) {$scope.person = '某人的名字';$http.get('../js/students.json').success(function (data) {$scope.allStudents = 数据；$scope.studentId = $routeParams.itemId;$scope.student = 数据[$scope.studentId];});

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

即使是过滤列表，我怎样才能使路由工作?

解决方案

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

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

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

尽管这不是您能想象的最高效的代码.

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

$scope.students = $scope.students.map(function(student, index) {student.index = 索引；返校生；});

在列表中:

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

顺便说一下，总是使用 ng-href 在链接中包含占位符时.Angular API 文档中详细描述了为什么要这样做:

<块引用>

如果用户在 Angular 有机会用它的值替换 {{hash}} 标记之前点击它，在 href 属性中使用像 {{hash}} 这样的 Angular 标记会使链接转到错误的 URL.在 Angular 替换标记之前，链接将被破坏并且很可能会返回 404 错误.ngHref 指令解决了这个问题.

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

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

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?

解决方案

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

And in the list:

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

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

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:

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