Angular JS多选框过滤器不能正常工作?

时间:2016-12-29 07:53:39

标签: javascript angularjs

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

您能帮我获取数据

1 个答案:

答案 0 :(得分:1)

使用here中的此自定义过滤器仅获取唯一值:Updated Plunkr

"use strict";
var a = Object.create(Object.prototype, {
    name: {
        enumerable: true,
        writable: false,
        value: 'foo'
    }
});

var b = Object.assign({}, a);
b.name = 'bar';

<强> HTML: 像下面这样更改过滤器:

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;
    };
});