javascript - 如何使过滤器与angularjs中的数组一起使用

Question

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

["tag1","tag2"]

现在我需要过滤所有标签匹配 id1,id2 的 objs。下面是我试过的过滤器

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>

但数据没有显示。你能帮我解决我做错的地方吗？下面提供 Plunker 代码

plunker here

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-click 添加到可修改的信息中，然后在该操作上重新过滤 $scope.suggestionResult来自原始response.data