如何使用 AngularJs 创建多重搜索答案

【问题标题】：how to create a multiple search using AngularJs如何使用 AngularJs 创建多重搜索
【发布时间】：2016-07-17 10:54:36
【问题描述】：

如果我想找到这样的组合位置+国籍，如果我输入例如 Keeper England，我应该怎么做

<section ng-controller="searchController">
                    <input class="field" ng-model="searchField">
                    <div id="update">
                        <ul>
                            <li ng-repeat="item in players | filter: searchField | orderBy: playersOrder">
                                <p class="name">{{item.name}}</p>
                                <p>{{item.position}}</p>
                                <p>{{item.jerseyNumber}}</p>
                                <p>{{item.dateOfBirth}}</p>
                                <p>{{item.nationality}}</p>
                                <p>{{item.contractUntil}}</p>
                                <p>{{item.marketValue}}</p>
                            </li>
                        </ul>
                    </div>
                </section>

var myApp = angular.module("myApp", []);

myApp.controller("searchController", function($scope, $http) {
    $http.get("scripts/players.json").success(function(data) {
        $scope.players = data;
        $scope.playersOrder = 'name';
    });
});

json 文件：球员 {
“身份证”：2138， "name":"Thibaut Courtois", "位置":"守门员", "球衣号码":13, "dateOfBirth":"1992-05-11", "国籍":"比利时"" }, {
“身份证”：2140， "name":"贾马尔·布莱克曼", "位置":"守门员", "球衣号码":27, "dateOfBirth":"1993-10-27", “国籍”：“英格兰” },

【问题讨论】：

标签： javascript angularjs json

【解决方案1】：

在 AngularJS 中你可以创建一个filter 函数：

angular
    .module('myApp', [])
    .controller('searchController', function($scope) {
        // the json response
        $scope.players = [{"id": 2138,"name": "Thibaut Courtois","position": "Keeper","jerseyNumber": 13,"dateOfBirth": "1992-05-11","nationality": "Belgium"}, {"id": 2140,"name": "Jamal Blackman","position": "Keeper","jerseyNumber": 27,"dateOfBirth": "1993-10-27","nationality": "England"}];
        $scope.playersOrder = 'name';
        $scope.searchField = '';
        $scope.myFileterFunction = function(row) {
            var query = angular.lowercase($scope.searchField);
            if (query.indexOf(' ')) {
                var query_array = query.split(' ');
                var search_result = false;
                for (var x in query_array) {
                    query = query_array[x];
                    search_result = (angular.lowercase(row.position).indexOf(query || '') !== -1 
                        || angular.lowercase(row.nationality).indexOf(query || '') !== -1)  
                        ? true 
                        : false;
                }
                return search_result;
            }
            return (angular.lowercase(row.position).indexOf(query || '') !== -1 
                    || angular.lowercase(row.nationality).indexOf(query || '') !== -1);
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<section ng-app="myApp" ng-controller="searchController">
  <input class="field" ng-model="searchField">
  <div id="update">
    <ul>
      <li ng-repeat="item in players | filter: myFileterFunction">
        <p class="name">{{item.name}}</p>
        <p>{{item.position}}</p>
        <p>{{item.nationality}}</p>
      </li>
    </ul>
  </div>
</section>

【讨论】：

【解决方案2】：

创建一个过滤函数filterBy，它将在item in players 中包含item 对象：

<li ng-repeat="item in players | filter: filterBy | orderBy: playersOrder">
 ...
</li>

以下方法检查项目是否与Name 和Nationality 的搜索查询匹配：

$scope.filterBy = function (item) {
 return item.name.toLowerCase().indexOf($scope.searchField.toLowerCase()) != -1 || 
        item.nationality.toLowerCase().indexOf($scope.searchField.toLowerCase()) != -1
 };

【讨论】：

【解决方案3】：

@Dima Vleskov，您可以通过创建自定义过滤器来滚动您自己的过滤器。

angular
  .module('euro2016', [])
  .controller('DefaultController', DefaultController)
  .filter('searchPlayer', searchPlayer);
  
  function DefaultController() {
    var vm = this;
    vm.players = players;
  }
  
  searchPlayer.$inject = ['$filter'];
  
  function searchPlayer($filter) {
    return function(data, param) {
      if (angular.isArray(data) && angular.isDefined(param)) {
        var params = param.split(' ');
        if (angular.isDefined(params) && params.length === 2) {        
          var searchTerm = { 
            position: params[0],
            nationality: params[1]
          };
          
          var players = $filter('filter')(data, searchTerm);
          
          return players;
        }
      }
      
      return data;
    }
  }
  
  var players = [
  { id: 1, name: 'Jack Butland', position: 'Keeper', nationality: 'England', img: 'http://www.telegraph.co.uk/content/dam/football/2016/01/25/butland_3548459k-large_trans++qVzuuqpFlyLIwiB6NTmJwfSVWeZ_vEN7c6bHu2jJnT8.jpg' },
  { id: 2, name: 'Thibaut Courtois', position: 'Keeper', nationality: 'Belgium', img: 'http://www.telegraph.co.uk/content/dam/football/2016/01/25/Thibaut_Courtois_3138923k-large_trans++qVzuuqpFlyLIwiB6NTmJwfSVWeZ_vEN7c6bHu2jJnT8.jpg' },
  { id: 3, name: 'Marc-Andre ter Stegen', position: 'Keeper', nationality: 'Germany', img: 'http://www.telegraph.co.uk/content/dam/football/2016/01/25/ter-stegen_3548100k-large_trans++qVzuuqpFlyLIwiB6NTmJwfSVWeZ_vEN7c6bHu2jJnT8.jpg' },
  { id: 4, name: 'Joe Hart', position: 'Keeper', nationality: 'England', img: 'http://www.telegraph.co.uk/content/dam/football/2016/01/25/Joe_Hart_3138807k-large_trans++qVzuuqpFlyLIwiB6NTmJwfSVWeZ_vEN7c6bHu2jJnT8.jpg' }
  ];

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="euro2016">
  <div ng-controller="DefaultController as ctrl">
    <label>Search</label>&nbsp;<input type="text" ng-model="ctrl.searchTerm">
    <div ng-repeat="player in ctrl.players | searchPlayer: ctrl.searchTerm">
      <h2>{{player.name}} {{player.nationality}}</h2>
      <img ng-src="{{player.img}}" style="height: 200px;"/>
    </div>
  </div>
</div>

【讨论】：