AngularJS -从控制器内部获取过滤的ng-repeat $index

AngularJS - Getting filtered ng-repeat $index from inside a controller

本文关键字：ng-repeat index 过滤 获取 控制器 内部 AngularJS      更新时间：2023-09-26

我有一个带有过滤器的ng-repeat列表。我似乎找不到如何从我的控制器内部获得可见的$index。

我可以很容易地显示它，当列表被过滤时，它会动态变化。

<div ng-repeat="stuff in myList| filter:query | orderBy:orderProperty">
    <label>{{$index}}</label>
</div>

但我似乎无法从控制器内以编程方式获得正确的$index。我已经尝试了$scope.myList.indexOf(myObj)和for循环，但我仍然没有得到正确的$索引，我得到了原始的，未过滤的列表中项目的$index。

我需要这个的原因是因为我有一个全局音频播放器，我需要自动播放过滤列表。所以当我的音频"结束"时，我开始在可见列表中播放next()元素。

解决这个问题的一种方法是编写自己的自定义过滤器，并在返回数组之前为每个元素添加索引，然后使用该索引而不是$index。

下面是一些示例代码。

angular.module('myFilters', []).filter('filterWithIndex', function() {
  return function(input) {
    var filteredInput = [];
    for(var i = 0; i < input.length; i ++) {
      filteredInput.push(input[i]);
      filteredInput[i].index = i + 1;
    }
    return filteredInput;
  };
});

如果你不介意在代码中做所有的过滤和排序，你可以在你的控制器中做所有的事情。只要确保你先把$filter注入它。

// $filter must be injected earlier
$scope.filteredList = function(list) {
    var result;
    result = $filter('filter')(list, $scope.query);
    result = $filter('orderBy')(result, $scope.orderProperty);
    return result;
};

然后你的HTML变成

<div ng-repeat="stuff in filteredList(myList)">
    <label>{{$index}}</label> 
</div>
相关文章：