javascript - Angular JS 多选框过滤器无法正常工作？

Question

我正在学习 angularjs 并且也在为选择而苦苦挣扎。我知道这个问题已经得到解答，但仍然想分享更多代码。

在我的测试中，我有两个列表框:锦标赛名称和锦标赛城市

比赛城市应该是独一无二的

当我选择锦标赛名称时，它会显示相应的锦标赛名称列表，它只是正确的当我在选择框中选择城市时，它不会填充任何东西

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>

你能帮我获取数据吗

Answer 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'">