angularjs - 如何根据其中一个属性的值在控制器中获取 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=preview

有什么想法吗？

Answer 1

您的 ng-repeat 表达式会在您的范围内创建过滤列表数组。
<li ng-repeat="item in (filteredItems = (items | filter:query))">

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

这是一个演示：http://plnkr.co/69nnbaZaulgX0odG7g7Y

查看此相关帖子：AngularJS - how to get an ngRepeat filtered result reference

更新
您的 cmets 表明您不想等待 ng-repeat 创建过滤项目的数组。您可以使用$filter 服务在页面加载之前轻松初始化相同的数组。使用：

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

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

这是一个更新的（和互动的）demo:http://plnkr.co/NSvBz1yWvmeFgXITutZF