current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
up vote 0 down vote favorite

I'm trying to filter a nested array of objects with my own objects, by idSubject. But I'm not getting the right result.

I have articles (which have subjects) And a array of objects (which are the subjects I want to filter the articles with)

Data looks like this:

enter image description here

enter image description here

So I'm trying to filter the array of articles by its subjects.

I tried the following:

<div class="panel panel-default"
                     ng-repeat="searchArticle in searchArticles | filter: {subjects: filterSubjects} as articleSearchResult">

So filterSubjects is the second screenshot and SearchArticles is the first screenshot.

Without much luck.

Hope you can help, please tell me if things are still unclear.

share|improve this question
    
You will need to create a custom filter for this and do the matching yourself – charlietfl 1 hour ago
    
@charlietfl Any example?. I tried this a couple of times but failed. – TVH7 1 hour ago
    
Are all the name values unique? If so I would make an object that uses those values as keys and then in the filtering check if that property exists when you iterate main array – charlietfl 1 hour ago
    
@charlietfl No. Only the idSubject. This is also the only property I want to filter. There are checkboxes which I want to be able to check and then filter the subjects of the articles. The idSubject is unique. – TVH7 1 hour ago
    
Same principle then ... extract all the ID's from filterSubjects then check when you iterate searchArticles – charlietfl 1 hour ago
up vote 1 down vote

This custom filter will help you.

Example : http://plnkr.co/edit/jMizCLxPH6DtDA5wL15Q?p=preview

HTML:

<body ng-app="myApp">
  <div ng-controller="MainCtrl">
<h2>Select Subjects</h2>
    <div ng-repeat="subject in subjects">
      <label>
        <input type="checkbox" ng-model="filterSubjects[subject.id]" ng-true-value="'{{subject.id}}'" ng-false-value="''">{{subject.name}}</label>
    </div>

    <h2>Filtered Articles</h2>

    <div ng-repeat="searchArticle in searchArticles | subjectFilter:filterSubjects">{{searchArticle.name}}</div>
  </div>
</body>

JS:

var app = angular.module('myApp', []);

app.controller('MainCtrl', function($scope) {
  $scope.searchArticles = [{
    "name": "Article1",
    "sid": "1"
  }, {
    "name": "Article2",
    "sid": "1"
  }, {
    "name": "Article3",
    "sid": "2"
  }];
  $scope.subjects = [{
    "name": "Subject1",
    "id": "1"
  }, {
    "name": "Subject2",
    "id": "2"
  }];
  $scope.filterSubjects = [];

});

app.filter('subjectFilter', function() {
  return function(articles, filterSubjects) {
    filtered = articles.filter(function(e){return filterSubjects.indexOf(e.sid) > 0},filterSubjects);
    return filtered;
  }
});
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.