Question

我有4个不同的选择元素，我想用它们过滤我的ng-repeat。如果我选择不同选择元素的1个选项，结果就可以了，但是当我选择2个选项时，它会失败。

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>

的javascript：

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

中查看此代码

Angular js过滤器中的多重多选

1 个答案: