Angular js 필터의 다중 다중 선택

Question

4 개의 다른 select 요소가 있고 그 중 ng-repeat를 필터링하려고합니다. 다른 선택 요소의 1 옵션을 선택하면 결과가 좋지만 2 옵션을 선택하면 오류가 발생합니다. 여기

는 exemple에게 있습니다 http://jsfiddle.net/245NY/

HTML :

<div ng-app="app" ng-controller="goalList" > 
    <div class="hidden filter"> 
      <select multiple="multiple" data-placeholder="Team" ng-multiple="true" ng-model="selectedTeams" ng-options="team for team in teams"class="select" > 
      </select> 
      <select multiple="multiple" data-placeholder="League" ng-multiple="true" ng-model="selectedLeague" ng-options="league for league in leagues"class="select" > 
      </select> 
      <select multiple="multiple" data-placeholder="Season" ng-multiple="true" ng-model="selectedSeason" ng-options="season for season in seasons"class="select" > 
      </select> 
      <select multiple="multiple" data-placeholder="City/Country" ng-model="selectedCountry" ng-options="countrys for countrys in country"class="select" ></select> 
    </div> 
    <div> 
     <div ng-repeat="goal in goals | filter:{ Team: selectedTeams, League:selectedLeague,Season:selectedSeason ,Country:selectedCountry}" > 
      {{goal.Team}} 
     </div> 
    </div> 
</div> 

자바 스크립트 :

var json = [ 
    { 
    "Team":"Paris Saint Germain", 
    "VS":"Guingamp", 
    "Home":"Ja", 
    "Date":"2013-08-31", 
    "League":"Ligue 1", 
    "Result":"2-0", 
    "City/Country":"Paris/France", 
    "URL":"https://www.youtube.com/watch?feature=player_detailpage&v=0h46CxzQpuY#t=160", 
    "start":"2:40", 
    "Season":"2013/2014", 
    "quality":"" 
    }, 
    { 
    "Team":"Kazakhstan", 
    "VS":"Sweden", 
    "Home":"", 
    "Date":"2013-09-10", 
    "League":"National", 
    "Result":"0-1", 
    "City/Country":"Astana/Kazakhstan", 
    "URL":"https://www.youtube.com/watch?feature=player_detailpage&v=vO80M5ftVSo#t=5", 
    "start":"0:04", 
    "Season":"2013/2014", 
    "quality":"" 
    }, 
    { 
    "Team":"Paris Saint Germain", 
    "VS":"Monaco", 
    "Home":"Ja", 
    "Date":"2013-09-22", 
    "League":"Ligue 1", 
    "Result":"1-1", 
    "City/Country":"Paris/France", 
    "URL":"https://www.youtube.com/watch?feature=player_detailpage&v=XMKpCwZovi0#t=32", 
    "start":"0:30", 
    "Season":"2013/2014", 
    "quality":"" 
    }, 
    { 
    "Team":"Paris Saint Germain", 
    "VS":"Benfica", 
    "Home":"Ja", 
    "Date":"2013-10-02", 
    "League":"Champions League", 
    "Result":"3-0", 
    "City/Country":"Paris/France", 
    "URL":"https://www.youtube.com/watch?feature=player_detailpage&v=W7VyshZkZO0#t=34", 
    "start":"0:34", 
    "Season":"2013/2014", 
    "quality":"" 
    }, 
    { 
    "Team":"Paris Saint Germain", 
    "VS":"Benfica", 
    "Home":"Ja", 
    "Date":"2013-10-02", 
    "League":"Champions League", 
    "Result":"3-0", 
    "City/Country":"Paris/France", 
    "URL":"https://www.youtube.com/watch?feature=player_detailpage&v=W7VyshZkZO0#t=66", 
    "start":"1:07", 
    "Season":"2013/2014", 
    "quality":"" 
    }, { 
    "Team":"Sweden", 
    "VS":"France", 
    "Home":"Ja", 
    "Date":"2012-06-19", 
    "League":"Euro Championship", 
    "Result":"2-0", 
    "City/Country":"Kiev/Ukraine", 
    "URL":"http://www.youtube.com/watch?v=DDbOmp9_Nn4#t=183", 
    "start":"3:04", 
    "Season":"2011/2012", 
    "quality":"" 
    } 
]; 
var base=[]; 
var app = angular.module('app', []); 
app.controller('goalList', function($scope, $http) { 
    $scope.goals = []; 
      //$scope.goals = res.data; 
      var data = json; 
      for (var i=0, len=data.length; i<len; i++) { 

       base.push({ 
         'id' : i, 
         'Team':data[i]['Team'], 
         'VS':data[i]['VS'], 
         'Home':data[i]['Home'], 
         'Date':new Date(data[i]['Date']), 
         'League':data[i]['League'], 
         'Result':data[i]['Result'], 
         'Country':data[i]['City/Country'], 
         'URL':data[i]['URL'], 
         'vidid':data[i]['URL'], 
         'start' : data[i]['start'], 
         'Season' : data[i]['Season'], 
         'Thumb' : "http://img.youtube.com/vi/mqdefault.jpg" 
        }); 
      } 
      $scope.goals = base; 
      $scope.leagues =_.chain($scope.goals).pluck("League").uniq().sortBy().value(); 
      $scope.teams =_.chain($scope.goals).pluck("Team").uniq().sortBy().value(); 
      $scope.seasons =_.chain($scope.goals).pluck("Season").uniq().sortBy().value(); 
      $scope.country =_.chain($scope.goals).pluck("Country").uniq().sortBy().value(); 
      $scope.clearFilters = function(){ 
       $scope.selectedLeague = undefined; 
       $scope.selectedTeams = undefined; 
       $scope.selectedSeason = undefined; 
       $scope.selectedCountry = undefined; 
      }; 



}); 

Answer 1

당신은 필터 기준 항목을 받아 들일 것, 사용자 정의 필터를 사용하여이를 달성 할 수 예 :

app.filter('customFilter', function() { 
     return function (items, filterData) { 
      if(filterData == undefined) 
       return items; 
      var keys = Object.keys(filterData); 
      var filtered = []; 
      var populate = true; 
      for (var i = 0; i < items.length; i++) { 
       var item = items[i]; 
       populate = true; 
       for(var j = 0; j < keys.length ; j++){ 
        if(filterData[keys[j]] != undefined){ 
         console.log(filterData[keys[j]]+ " "+item[keys[j]]); 
         if(filterData[keys[j]].length == 0 || filterData[keys[j]].contains(item[keys[j]])){ 
          populate = true; 
         }else{ 
          populate = false; 
          break; 
         } 
        } 
       } 
       if(populate){ 
        filtered.push(item); 
       } 
      } 
     return filtered; 
     }; 
    }); 

체크 아웃 코드 : JSFIDDLE