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

前端之家收集整理的这篇文章主要介绍了angularjs – 如何根据其中一个属性的值在控制器中获取ng-repeat过滤器中项目的索引?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在我的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

任何的想法 ?

解决方法

ng-repeat表达式在作用域上创建filteredList数组.
< 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

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

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

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

这是更新的(和交互式的)demohttp://plnkr.co/NSvBz1yWvmeFgXITutZF

猜你在找的Angularjs相关文章