如何在控制器中获得基于其属性之一的值的ng-repeat过滤器中的项的索引

Question

我在html文件中使用ng-repeat来显示过滤后的项目:

<li ng-repeat="item in (filteredItems = (items | filter:query))">
  {{ item.name }}
</a>

在控制器中，我想根据一个条目的属性获取它的索引

精度:我想在过滤列表中获得索引，而不是在整个列表中。

在这里，它将是名称为some_item_7的项目的索引。

var app = angular.module('myApp', []);
app.controller('MyCtrl', ['$scope',
  function MyCtrl($scope) {
    $scope.query = 'some';
    $scope.items = 
    [
      { name: 'some_item_1' },
      { name: 'another_item_2' },
      { name: 'some_item_3' },
      { name: 'another_item_4' },
      { name: 'some_item_5' },
      { name: 'another_item_6' },
      { name: 'some_item_7' },
      { name: 'another_item_8' },
      { name: 'some_item_9' }
    ];
    $scope.itemNext = function (item) {
      console.log(item.name);
    };
    $scope.getIndexFromName = function (name) {
      console.log("trying to get the index of the item with name = " + name);
    }
    $scope.getIndexFromName('some_item_7');
  }
]);

http://plnkr.co/edit/C8gL9qV1MyonTwDENO9L?p =

预览

Answer 1

你的ng-repeat表达式在你的作用域中创建了一个filteredList数组。
<li ng-repeat="item in (filteredItems = (items | filter:query))">

可以像遍历任何数组一样遍历它，检查与name参数匹配的项。$scope.filteredItems

下面是一个演示:http://plnkr.co/69nnbaZaulgX0odG7g7Y

查看相关文章:AngularJS -如何获得一个ngRepeat过滤的结果参考

您的注释表明您不想等待ng-repeat创建筛选项数组。您可以使用$filter服务在页面加载之前轻松初始化相同的数组。用途:

$scope.filteredItems = $filter('filter')($scope.items, {name: $scope.query}, false)

这样做不会干扰ng-repeat在DOM创建期间将其过滤结果保存到相同的filteredItems数组。

这里是一个更新的(和交互式的)演示:http://plnkr.co/NSvBz1yWvmeFgXITutZF