我有以下代码，它使用controller来获取JSON文件的内容，然后显示前5个结果。该代码还包括一个允许用户搜索的过滤器。
过滤器会在name和code中查找结果（请参阅下面的JSON示例），这很棒。但是，我希望过滤器做得更多; code是唯一的，如果找到与代码匹配的内容，则应显示在列表顶部，其余四个结果列在name下方。
例如，如果用户要搜索swi，则目前列出的五个结果是 -
Brunswick（BRW）
奇斯威克（CHK）
德比路（伊普斯维奇）（DBR）
Giggleswick（GIG）
赫顿克兰斯威克（HUT）
我想要的是 -
斯宾登（SWI）
不伦瑞克（BRW）
奇斯威克（CHK）
德比路（伊普斯维奇）（DBR）
Giggleswick（GIG）
这是否可以使用AngularJS，或者我是否会考虑使用一些更复杂的逻辑来获得我想要的结果？
[
{
"name": "Abbey Wood",
"code": "ABW"
},
{
"name": "Aber",
"code": "ABE"
},
{
"name": "Abercynon",
"code": "ACY"
}
]
<!DOCTYPE html>
<html lang="en-GB" data-ng-app="tigerSelector">
<head>
<meta charset="UTF-8">
<title>Tiger | Staff CIS Selector</title>
<!-- Mobile stuff -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<!-- Angular JS -->
<script src="angular/angular.js"></script>
<script type="text/javascript">
var app = angular.module('tigerSelector', []);
app.controller('stationsCtrl', function($scope, $http){
$http.get('stations.json').then(function(res){
$scope.stations = res.data;
});
});
</script>
</head>
<body>
<div data-ng-controller="stationsCtrl">
<p>Filtering input:</p>
<p><input type="text" data-ng-model="search"></p>
<ul>
<li data-ng-repeat="station in stations | filter:search | orderBy:'name' | limitTo:5">
{{ station.name }} ({{ (station.code | uppercase) }})
</li>
</ul>
</div>
</body>
</html>
答案 0 :(得分：1)
您可以创建自定义过滤器，迭代您的收藏集，并将search ngModel传递给过滤器。
过滤
(function(){
function filter(){
return function (input, search) {
var out = [];
//Map over the input
[].map.call(input || [], function(elm){
//Compare code value to search model
elm.code.toLowerCase() === search
//Push elm at the beginning of the array
? out.unshift(elm)
//Otherwise, add element to the end of the array
: out.push(elm);
});
//Return our filtered array
return out;
};
}
angular
.module('app')
.filter('myFilter', filter);
})();
然后，您可以将过滤器调用到模板中。您可以组合多个过滤器。
<强> HTML
<p><input type="text" data-ng-model="search"></p>
<ul>
<li data-ng-repeat="station in stations | myFilter:search | filter:search | limitTo:5">
{{ station.name }} ({{ (station.code | uppercase) }})
</li>
</ul>