如何在AngularJS中按对象中的特定属性过滤？

Question

我在AngularJS中有对象：

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

如何通过ng-click按genre过滤此数组？ 例如ng-click="filterByGenre(2)" 。

它应该只返回一个元素：

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

Answer 1

这是您尝试实现的简单工作提琴 。 它确实按属性genre过滤对象，您可以在其中搜索文本字段中的Id 。 例如8 。

看一下过滤器声明filter:{genre:searchGenre} ，其中包含要过滤的属性名称genre和模型输入searchGenre 。 有关更多信息，请查看filter的AngularJS文档 。

---

以下示例显示了如何在“视图- 小提琴”演示中进行过滤

视图

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

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

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

---

以下示例显示了如何在控制器中进行过滤-Fiddle演示

视图

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

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

尝试这样。

 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

您可以使用过滤器功能

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

或者你可以用旧的for循环方式

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