如何使过滤器在angularjs中使用数组

Question

我正在尝试创建自定义过滤器来过滤angularjs中匹配的值数组。下面的数组结构

["tag1","tag2"]

现在我需要过滤所有标签id1,id2..以下是我尝试过的过滤器

var autoFilter = angular.module("autoFilters",[]);
autoFilter.filter('arrayData', function (){
return function(){
return ["id1","id2"];
}
//$scope.arrayValues = ["id1","id2"];

}(;

和下面的 UI 代码

<li style="cursor:pointer" ng-cloak class="list-group-item" ng-repeat="values in suggestionResults | arrayData">{{values.id}} -- {{values.title}}</li>

但数据没有显示出来。你能帮我找出我做错的地方吗？下面提供了普伦克代码

在这里扑克

Answer 1

请参阅下面的代码:)在我看来，这不是最好的方法，并且对于较大的列表肯定会有一些性能问题，但它可以正常工作(现在我用了indexOf(2)但在那里你可以通过任何真实/虚假的论点(

var autoFilter = angular.module("autoFilters",[]);
autoFilter.controller("filterController",['$scope','$http', function ($scope,$http) {
$scope.searchSuggest = function(){
//$http({method: 'GET', url: 'json/searchSuggestions.json'}).success(function(data) {
$http.get("assets.json").then(function(response) {
//var str = JSON.stringify(response);
//var arr = JSON.parse(str);
$scope.suggestionResult = response.data;
console.log($scope.suggestionResult);
//$scope.arrayData = ["asset_types:document/data_sheet","asset_types:document/brochure"];
}).catch(function activateError(error) {
alert('An error happened');
});         
}
$scope.showProduct = function(){
}
}]);
autoFilter.filter('arrayData', function (){
return function(data){
// if you are using jQuery you can simply return $.grep(data, function(d){return d.id.indexOf('2') >-1 });
return data.filter(function(entry){
return entry.id.indexOf('2') > -1
})
}
});

但是，在处理大型列表的经验之后，我建议您避免为此使用单独的过滤器，而是在.js代码中对其进行操作。当您使用 $http.get 查询数据时，您可以轻松过滤数据，如下所示：

$scope.suggestionResult = response.data.filter(function(){
return /* condition comes here */
} 

这样你就不会重载 DOM，并帮助浏览器处理 AngularJS 有时很慢的摘要周期。

如果您需要它是动态的(例如，过滤条件可以由用户更改(，则添加 ng-change 或 $watch 或 ng 单击到可修改的信息中，并在该操作上重新过滤 $scope.suggestion来自原始响应的结果.data