Question

我正在尝试通过一组来自不同对象的复选框来过滤我的ng-repeat。对象1包含我的类别，对象2包含我的所有文章。

分类对象将变为复选框。这些复选框应作为文章的过滤器。一篇文章可以有多种类别。

$ scope.categories：

[
  {
    "id": "1",
    "title": "Blog"
  },
  {
    "id": "2",
    "title": "News"
  }
]

$ scope.articles：

[
  {
    "id": "1",
    "title": "Whats going on",
    "categories":{
     "results" : [1,2,3]
    }
  },
  {
    "id": "2",
    "title": "Trump!",
    "categories":{
     "results" : [3]
    }
  }
]

复选框：

<div class="filter-pills" ng-repeat="cat in categories">
   <input type="checkbox" ng-model="filter[cat.Id]" ng-checked="cat.checked"/>{{cat.Title}}                         
</div>

NG-重复：

<div class="col-lg-3 col-md-4" ng-repeat="item in articlesFinal"></div>

我更新ng-change数组并将其与filter中使用的对象进行比较时尝试了ng-repeat等不同解决方案。

我似乎无法想出这个。有什么建议吗？

Answer 1

试试这个

<div class="filter-pills" ng-repeat="cat in categories">
      <input type="checkbox" ng-model="cat.checked"/>{{cat.title}}
</div>
<div class="col-lg-3 col-md-4" ng-repeat="item in articles | filter: catFilter">{{item.title}}</div>

并在控制器中

$scope.catFilter = function (article) {
        var checkedCats = vm.categories.filter(function (cat) {
            return cat.checked;
        });
        // no filter, show all
        if(checkedCats.length == 0) return true;

        for(var i = 0; i < checkedCats.length; i++){
            var id = checkedCats[i].id;
            if(article.categories.results.indexOf(id) >= 0){
                return true;
            }
        }
        // no match, then false
        return false
    };

另请注意，类别ID应为整数，而不是字符串

$scope.categories = [
            {
                "id": 1, // integer
                "title": "Blog"
            },
            {
                "id": 2,
                "title": "News"
            }
        ];
        $scope.articles = [
            {
                "id": "1",
                "title": "Whats going on",
                "categories":{
                    "results" : [1,2,3] // integer
                }
            },
            {
                "id": "2",
                "title": "Trump!",
                "categories":{
                    "results" : [3]
                }
            }
        ];

AngularJS使用一个对象作为另一个对象的过滤器

1 个答案: