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

Question

我在AngularJS中有对象：

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

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

它应该只返回一个元素：

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

Answer 1

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

查看过滤器声明filter:{genre:searchGenre}，其中包含要过滤的属性名称genre和模型输入searchGenre。有关详细信息，请查看AngularJS Documentation of filter。

以下示例显示了如何在视图中进行过滤 - Fiddle demo

视图

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

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

视图

<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

试试这样。

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

您可以使用filter功能

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