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
}

Answer 1

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

Answer 2

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> 

Answer 3

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