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>