2016-12-29 83 views
2

我正在学习angularjs,并且还在为选择而苦苦挣扎。我知道这个问题已经得到解答,但是想分享更多的代码。Angular JS多选框过滤器无法正常工作?

在我的测试,我有两个列表框:比赛名称和比赛城市

比赛城市应该是唯一的

当我选择比赛的名称会显示相应的比赛名单中它的到来正确只 当我seclect城市选择框,它不会填充任何事情

app.controller('MainCtrl', function($scope) { 
    $scope.tournaments = [ 
    { id: 1, name: 'Banglore Cup', city:'Banglore' }, 
    { id: 2, name: 'Banglore Cup1', city:'Mumbai' }, 
    { id: 3, name: 'Banglore Cup2', city:'Banglore' }, 
    { id: 4, name: 'Mumbai Cup1', city:'Mumbai' }, 
    { id: 5, name: 'Mumbai Cup2', city:'Banglore' } 
    ]; 
}); 



     <div class="row"> 
      <div class="col s4 input-field "> 
       <select class="browser-default" name="show-filter" ng-model="tournamentFilter.id" ng-options="eachTournament.id as eachTournament.name for eachTournament in tournaments"> 
        <option value="" selected> All</option> 
       </select> 
      </div> 
      <div class="col s4 input-field "> 
       <select class="browser-default" name="show-filter" ng-model="tournamentFilter.city" ng-options="eachTournament.city as eachTournament.city for eachTournament in tournaments| unique:'city'"> 
        <option value="" selected> All</option> 
       </select> 
      </div> 
     </div> 
    </div> 
    <div class="col s12"> 
     <table class="list_tournament"> 
      <tbody ng-repeat="eachTournament in tournaments | filter:{id:tournamentFilter.id||undefined} | orderBy:'name'"> 
       <tr class="row nomargin"> 
        <td class="col s4 m3 tournament_list_location"> 
         <a href="#/viewtournament/{{eachTournament.id}}">{{eachTournament.name}}</a> 
        </td> 
        <td class="tournament_list_location col s12 m3"> 
         {{eachTournament.city}} 
        </td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 

你能帮我获取数据

+0

请加小提琴或plunker –

+1

@cherry HTTP:/ /plnkr.co/edit/I4iCnEoRBDF8OWaX9vry?p=preview –

+0

@SaEChowdary谢谢你我其实我不知道如何创建小提琴或plnkr.please帮我回答我的问题 –

回答

1

使用来自here这个自定义过滤器来获得唯一的值:Updated Plunkr

app.filter('unique', function() { 
    return function(input, key) { 
     var unique = {}; 
     var uniqueList = []; 
     for(var i = 0; i < input.length; i++){ 
      if(typeof unique[input[i][key]] == "undefined"){ 
       unique[input[i][key]] = ""; 
       uniqueList.push(input[i]); 
      } 
     } 
     return uniqueList; 
    }; 
}); 

HTML: 更改过滤器象下面这样:

<tbody ng-repeat="eachTournament in tournaments | filter:{id:tournamentFilter.id, city: tournamentFilter.city||undefined} | orderBy:'name'"> 
+0

但最初当我选择城市什么都没有发生 –

+0

城市被选中的权利?在这种情况下你的期望是什么? – superUser

+0

不错,但一切不工作检查它 –