我已经为此苦苦挣扎了几个小时。情况是,我有一个应用程序,它以这种 JSON 格式接收有关人员的数据:
"people": [
{
"name": "Ivan",
"city": "Moscow",
"country": "Russia"
},
{
"name": "John",
"city": "Seattle",
"country": "United States"
},
{
"name": "Michael",
"city": "Seattle",
"country": "United States"
}
]
我需要根据他们的城市将它们过滤成组(显示在下拉列表中<ul>
s.即用户单击"西雅图"并显示带有约翰和迈克尔<li>
。
如何做到这一点?
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>
工作示例
如果您仅使用搜索作为ng模型,它将过滤整个对象。但是当我使用search.city时,它只过滤了该字段。
使用角度过滤器进行分组。您的视图代码将如下所示:
<ul ng-repeat="(key, value) in people | groupBy: 'city'">
City: {{ key }}
<li ng-repeat="person in value">
person: {{ person.name }}
</li>
</ul>
这是一个普伦克。
您可以将过滤器放在选择选项中,该选项限制用户选择来自服务器的一个城市。 https://jsfiddle.net/4bhjm5vu/
应用.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>
试试,
<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