【问题标题】：Filter an array by two different criteria按两个不同的标准过滤数组
【发布时间】：2015-08-11 00:33:36
【问题描述】：

我有下面的代码，它使用controller 来获取 JSON 文件的内容，然后显示前 5 个结果。该代码还包括一个过滤器以允许用户进行搜索。

过滤器在name 和code 中查找结果（请参见下面的 JSON 示例），这很棒。但是，我希望过滤器做得更多； code 是唯一的，如果找到与代码匹配的代码，它应该显示在列表顶部，其余四个结果由 name 在下面列出。

例如，如果用户要搜索swi，目前列出的五个结果是-

不伦瑞克 (BRW)
奇斯威克 (CHK)
德比路 (伊普斯维奇) (DBR)
吉格斯威克 (GIG)
赫顿克兰斯维克 (HUT)

我想要的是-

斯温顿 (SWI)
不伦瑞克 (BRW)
奇斯威克 (CHK)
德比路 (伊普斯维奇) (DBR)
吉格斯威克 (GIG)

这是否可以使用 AngularJS，或者我会考虑使用一些更复杂的逻辑来获得我想要的结果？

JSON 示例

[
  {
    "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>

【问题讨论】：

需要您自己的排序功能才能对排序进行优先排序...这将导致创建自定义过滤器
@charlietfl - 谢谢，我刚刚发现了自定义过滤器，现在正在调查...

标签： angularjs filter

【解决方案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>

【讨论】：

非常感谢，这正是我所需要的。我做了两个小修改 - 1) 为避免错误（search 未定义），检查search 是否已在filter() 函数中定义（如果没有，我返回input）。 2) 将elm.code.toLowerCase() === search 更改为elm.code.toLowerCase() === search.toLowerCase() 以使搜索不区分大小写。