通过Angular.js中的通用对象属性过滤数组？

Question

我几个小时一直在努力。的情况是，我有一个应用程序，在这个JSON格式接收关于人的数据：

"people": [ 
     { 
     "name": "Ivan", 
     "city": "Moscow", 
     "country": "Russia" 
     }, 
     { 
     "name": "John", 
     "city": "Seattle", 
     "country": "United States" 
     }, 
     { 
     "name": "Michael", 
     "city": "Seattle", 
     "country": "United States" 
     } 
    ] 

我需要将它们过滤到基于他们的城市群（在下拉列表中显示<ul>小号即用户点击。 “西雅图”和<li> s的约翰和迈克尔都显示

如何可以做到这一点

Answer 1

使用angular-filter进行分组。您的查看代码如下所示：

<ul ng-repeat="(key, value) in people | groupBy: 'city'"> 
    City: {{ key }} 
    <li ng-repeat="person in value"> 
    person: {{ person.name }} 
    </li> 
</ul> 

这是Plunker。

Answer 2

app.controller('FooCtrl', function($scope) { 
    $scope.people = [ 
     { 
     "name": "Ivan", 
     "city": "Moscow", 
     "country": "Russia" 
     }, 
     { 
     "name": "John", 
     "city": "Seattle", 
     "country": "United States" 
     }, 
     { 
     "name": "Michael", 
     "city": "Seattle", 
     "country": "United States" 
     } 
    ]; 
}); 

而且你可以像这样将其过滤：？

<div ng-repeat="person in people | filter:{ city: 'Seattle' }"> 

对于动态搜索：

<div ng-app="demo" ng-controller="FooCtrl"><input type="text" ng-model="search.city" > 
    <ul> 
    <li ng-repeat = "person in people | filter: search"> {{person.name}</li> 
    </ul> 
</div> 

working example

如果使用只搜索为NG-模型，可以将过滤整个对象。但正如我使用search.city，它只是过滤该字段。

Answer 3

你可以试试，

<input type="text" ng-model = "search.city" > 
<ul> 
    <li ng-repeat = "people in peoples | filter: search"> {{people.name}}  </li> 
</ul> 

看到这个普拉克，http://plnkr.co/edit/SxcorUe1uAszY9FqBJXd?p=preview

Answer 4

你可以把过滤器，其中界定用户选择来自服务器或者一个城市选择选项。 https://jsfiddle.net/4bhjm5vu/

app.js：

angular.module('myApp', []) 
.controller('FooCtrl', function($scope) { 
    $scope.people = [ 
    { 
     "name": "Ivan", 
     "city": "Moscow", 
     "country": "Russia" 
    }, 
    { 
     "name": "John", 
     "city": "Seattle", 
     "country": "United States" 
    }, 
    { 
     "name": "Michael", 
     "city": "Seattle", 
     "country": "United States" 
    } 
]; 
}) 
.filter('unique', function() { 
    return function(input, key) { 
     var unique = {}; 
     var uniqueList = []; 
     for(var i = 0; i < input.length; i++){ 
      if(typeof unique[input[i][key]] == "undefined"){ 
       unique[input[i][key]] = ""; 
       uniqueList.push(input[i]); 
      } 
     } 
     return uniqueList; 
    }; 
}); 

HTML：

<div ng-app="myApp"> 
    <div ng-controller="FooCtrl"> 
     <select name="city" ng-model="selectedCity" data-ng-options="person.city as person.city for person in people | unique:'city'"><option data-ng-disabled='true' value="">City</option> 
     </select> 

     <table class="table"> 
      <thead> 
       <tr> 
        <th>Name</th> 
        <th>City</th> 
        <th>Country</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr ng-repeat="person in people | filter: {city: selectedCity}"> 
        <td>{{person.name}}</td> 
        <td>{{person.city}}</td> 
        <td>{{person.country}}</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</div>