Filtering a scope with multiple select in AngularJS

Question

Here is my fiddle: http://jsfiddle.net/mwrLc/12/

<div ng-controller="MyCtrl">
<select ng-model="searchCountries" ng-options="cc.country for cc in countriesList | orderBy:'country'">
    <option value="">Country...</option>
</select>
<select ng-model="searchCities" ng-options="ci.city for ci in citiesList | filter:searchCountries | orderBy:'city'">
    <option value="">City...</option>
</select>
<ul>
    <li ng-repeat="item in list | filter:searchCountries | filter:searchCities">
        <p>{{item.country}}</p>
        <p>{{item.city}}</p>
        <p>{{item.pop}}</p>
        <br>
    </li>
</ul>

The first select filters the second one but also the result list.
The second select filters only the result list.
It works great until a country and a city are chosen. Then, when you choose another country, second select got reseted but the scope seems to be stuck with the old value.

i cant find a way to have it works properly... Please help!

Ezekiel Victor · Accepted Answer · 2013-04-30 10:02:40Z

2

The best solution is to reset the city model when a change to country model is detected via $scope.$watch():

function MyCtrl($scope) {
    // ...

    $scope.$watch('searchCountry', function() {
        $scope.searchCity = null;
    });
}

Note that I changed your model names to singular form ("searchCountry" and "searchCity") which is more appropriate considering the value of those models is set to a single country or city.

Here is the full working example: http://jsfiddle.net/evictor/mwrLc/13/

answered Apr 30, 2013 at 10:02

Ezekiel Victor

3,8741 gold badge30 silver badges29 bronze badges

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

4 Comments

Gab. B Over a year ago

Indeed, this is the solution. I tried it, but it doesnt work with JQM and JQMA adapter installed... I can't figure out why. Angular and JQM really do not fit well together. Works well without JQM thow.

Ezekiel Victor Over a year ago

Could you post a fiddle or another question? I'd be curious to see what JQM is doing to mess it up!

Gab. B Over a year ago

jsfiddle.net/mwrLc/17 Here it is. As you can see, the second selector never reset, can't figure out why... Must be an issue from the adaptor.

Ezekiel Victor Over a year ago

My renaming of searchCountries => searchCountry and searchCities => searchCity threw you off. You pasted my snippet in but did not rename the models accordingly everywhere else. Here is the fixed fiddle using your original model names: jsfiddle.net/evictor/mwrLc/18 (though again I would advise renaming searchCountries => searchCountry, etc. for semantic correctness).

uxtx · Accepted Answer · 2013-06-06 19:45:14Z

Ezekiel Victors solution is excellent. However, I ran into a bit of a dependency injection issue while trying to get this to work when referencing the controller from an ng-include. Thanks to the help from Ben Tesser I was able to resolve the issue. Ive attached a jsfiddle that details the fix:

http://jsfiddle.net/uxtx/AXvaM/

the main difference is that you need to wrap the searchCountry/searchCity as an object and set the default value to null. Ditto for the watch.

  $scope.test = {
    searchCountry: null,
    searchCity: null
};
/// And your watch statement ///
    $scope.$watch('test.searchCountry', function () {
        $scope.test.searchCity =  null;
});

In your template you'll change all references from searchCountry/searchCity to test.searchCountry.

I hope this saves someone some time. It's trixy.

Collectives™ on Stack Overflow

Filtering a scope with multiple select in AngularJS

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related