How to filter by an specific attribute in an object in AngularJS?

Question

I have object in AngularJS:

 genres = [{
    label: "Trance",
    genre: "8",
    position: 8
}, {
    label: "House",  
    genre: "2",
    position: 8
}]

How to filter this array by genre by ng-click? For example ng-click="filterByGenre(2)".

It should returns me only one element:

{
    label: "House",  
    genre: "2",
    position: 8
}

lin · Accepted Answer · 2017-02-05 10:01:29Z

3

Here is a simple working Fiddle of what your try to achieve. It does filter your object by attribute genre where you can search for the Id in the text field. For example 8.

Take a look at the filter declaration filter:{genre:searchGenre} which holds the attribute name genre to filter and the model input searchGenre. For more information please take a look at the AngularJS Documentation of filter.

The following example shows how to filter in View - Fiddle demo

View

<div ng-controller="MyCtrl">
    <h1>Filter items</h1>
    <input type="text" ng-model="searchGenre">
    <h2>Genres</h2>
    <div ng-repeat="genre in genres | filter:{genre:searchGenre}">
      {{genre.label}}
    </div>
</div>

AngularJS app

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

function MyCtrl($scope) {
   $scope.genres = [{
      label: "Trance",
      genre: "8",
      position: 8
  }, {
      label: "House",  
      genre: "2",
      position: 8
  }];
}

The following example shows how to filter in an controller - Fiddle demo

View

<div ng-controller="MyCtrl">
    <div>Filter items</div>
    <input type="text" ng-model="searchGenre">
    <div>Genres</div>
    <div ng-repeat="genre in filtered">
      {{genre.label}}
    </div>
</div>

AngularJS App

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

function MyCtrl($scope, filterFilter) {

   $scope.genres = [{
      label: "Trance",
      genre: "8",
      position: 8
  }, {
      label: "House",  
      genre: "2",
      position: 8
  }];

  //init search phrase
  $scope.searchGenre = '';

  //init filtered scope
  $scope.filtered = [];

  /**
   * Watch keyword change
   */
  $scope.$watch('searchGenre', function(term) {
    $scope.filtered = filterFilter($scope.genres, {'genre': term});
  });
}

edited Feb 5, 2017 at 10:01

answered Feb 5, 2017 at 9:08

lin

18.5k4 gold badges66 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Darama Over a year ago

Whats filterFilter?

lin Over a year ago

Filters can be injected as a service. Whose name is <nameOfTheFilter>Filter

Darama Over a year ago

But I dont see filter in your example as service

lin Over a year ago

Its an AngularJS core service. Here is a list of core filters: docs.angularjs.org/api/ng/filter. My example is using filter.

Darama Over a year ago

It does not work filterFilter when I inject this in controller

|

Hadi · Accepted Answer · 2017-02-05 09:07:20Z

Try like this.

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

app.controller('myController', function($scope){
  $scope.genres = [
                {
                    label: "Trance",
                    genre: "8",
                    position: 8
                },

                {
                    label: "House",  
                    genre: "2",
                    position: 8
                }
  ];
          
          $scope.setGenreFilter = function(genre){
           $scope.genreFilter = genre; 
          }
          
          
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="myController">
    <div>Filter items</div>
    <span ng-repeat="genre in genres" ng-click="setGenreFilter(genre.genre)">{{genre.genre}}, </span>
    <div>****************GENRE**********************</div>
    <div ng-repeat="item in genres | filter:{genre:genreFilter}">
      {{item.label}}
    </div>
  </div>

Manish Gharat · Accepted Answer · 2017-02-05 09:08:34Z

-1

You can use filter function

genres.filter(function(item){
  return item.genre == '2';
});

or you can do it the old for loop way

var filteredData = [];
for(var i=0;i<genres.length;i++){
  if(genres[i].genre == '2'){
    filteredData.push(genres[i]);  
  }
}

answered Feb 5, 2017 at 9:08

Manish Gharat

4202 silver badges10 bronze badges

3 Comments

Manish Gharat Over a year ago

Just replace the '2' with a variable. I added '2' just for instance.

vp_arth Over a year ago

How this answer refers to angular scope?

Manish Gharat Over a year ago

It does not need to I guess. If you read the question, it says - How to filter this array by genre by ng-click? For example ng-click="filterByGenre(2)". What I have given is the body of the function filterByGenre

Collectives™ on Stack Overflow

How to filter by an specific attribute in an object in AngularJS?

3 Answers 3

The following example shows how to filter in View - Fiddle demo

View

AngularJS app

The following example shows how to filter in an controller - Fiddle demo

View

AngularJS App

8 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

The following example shows how to filter in View - Fiddle demo

View

AngularJS app

The following example shows how to filter in an controller - Fiddle demo

View

AngularJS App

8 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related