Javascript Angular JS multiple select box过滤器工作不正常？

我正在学习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>

app.controller（'MainCtrl'，函数（$scope）{
$scope.tournaments=[
{id:1，名字：'Banglore Cup'，城市：'Banglore'}，
{id:2，名字：'Banglore Cup1'，城市：'Mumbai'}，
{id:3，名字：'Banglore Cup2'，城市：'Banglore'}，
{id:4，名字：'Mumbai Cup1'，城市：'Mumbai'}，
{id:5，名字：'Mumbai Cup2'，城市：'Banglore'}
];
});
全部的
全部的
{{eachTournament.city}

---

您可以帮助我获取数据吗使用此自定义筛选器仅获取唯一值：

app.filter（'unique'，function（）{
返回功能（输入，按键）{
var unique={}；
var uniqueList=[]；
对于（变量i=0；i

Html: 按如下方式更改过滤器：

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

请添加小提琴或plunker@cherry@SaEChowdary谢谢我其实我不知道如何创作小提琴或plnkr。请帮我看看上面的问题@Aravi@SaEChowdary是的，我看到了，但整个城市列表都没有填充。为什么？你能理解我的用例吗？两者都应该是单独的。每个锦标赛只有一个城市。但同一个城市有多场比赛，但最初当我选择城市时，没有什么事情发生，对吗？在这种情况下，您的期望是什么？问题是当我单击任何一个城市或名称，然后选择所有城市或名称后，它将无法填充了解检查您的PlunkKernice工作suzo您可以帮助我非常感谢您请更正您的Plunk锦标赛名称选择已关闭，然后再选择ok…非常感谢您

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