Dima Vleskov Dima Vleskov - 4 months ago 22
JSON Question

how to create a multiple search using AngularJs

What should i do if i want to find such combination position + nationality if i type for instance 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 file:
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"
},

Answer

@Dima Vleskov you can roll your own filter, by creating a custom filter.

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>

Comments