通過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>