一尘不染

angularjs-如何根据其属性之一的值在控制器中获取ng-repeat过滤器中某项的索引?

angularjs

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

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

在控制器中,我想基于他的属性之一获取项目的索引。

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

例如,这里将是女巫名称is的索引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

任何想法 ?


阅读 192

收藏
2020-07-04

共1个答案

一尘不染

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

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

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

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

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

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

这是一个更新的(交互式)演示http
//plnkr.co/NSvBz1yWvmeFgXITutZF
2020-07-04