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

Question

I'm trying to filter my ng-repeat through a set of checkboxes which come from a different object. Object 1 holds my categories and object 2 holds all my articles .

The categores object will turn into checkboxes. These checkboxes should act as filter for the articles . An article can have mutliple categories.

$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]
    }
  }
]

Checkboxes:

<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-repeat:

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

I have tried different solutions like ng-change when i update my filter array and compare it to the object used in ng-repeat .

I can't seem to figure this one out. Any suggestions?

Answer 1

Try this

<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>

and in controller

$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
    };

Also notice that category id should be integer, not string

$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]
                }
            }
        ];