Question

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

我可以轻松地显示它，并在列表过滤后动态更改。

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

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

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

Answer 1

解决此问题的一种方法是编写自己的自定义过滤器，在返回数组之前，为每个元素添加一个索引，然后使用该索引而不是$ 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;
  };
});

希望这有帮助。

Answer 2

如果您不介意在代码中进行所有过滤和排序，则可以在控制器内部执行所有操作。只需确保先将$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>

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

2 个答案: