Angular JS multiple select box filter not working properly?

Question

I'm learning angularjs and was struggling with selection as well. I know this question is already answered but wanted to share some more code nevertheless.

In my test I have two listboxes: tournament name and tournament city

tournament city should be unique

When i select tournament name it will show up corresponding tournament name list it coming correct only When i seclect city in selectbox it wont populate any thing

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>

Can you help me to getting data

@SaEChowdary thankyou i actually i dont know how to create fiddle or plnkr.please help me my question — Aravi S
– Aravi S, Commented Dec 29, 2016 at 8:03
@SaEChowdary yea i seen but entire city list is not populated why?.Can you undestand my use case.Both should be individual.Each tournament have only one city.But same city have multiple tournaments — Aravi S
– Aravi S, Commented Dec 29, 2016 at 8:10

Community · Accepted Answer · 2017-05-23 12:08:47Z

1

Use this custom filter from here to get only unique values : 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: Change the filter like below :

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

edited May 23, 2017 at 12:08

CommunityBot

11 silver badge

answered Dec 29, 2016 at 8:24

Supradeep

3,2661 gold badge18 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Aravi S Over a year ago

but initially when i select city nothing happen

Supradeep Over a year ago

City is getting selected right ? What is your expectation in that situation ?

Aravi S Over a year ago

the problem is when i click any one city or name then after select all it wont populate understand checkit your plunker

Aravi S Over a year ago

Nice work suzo you help me alot thank you please correct your plunker tournament name select is closed before optioning ok....Thank you verymuch

Collectives™ on Stack Overflow

Angular JS multiple select box filter not working properly?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related