AngularJS - 从控制器内部获取过滤ng-repeat $索引

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>