CODEWITHSUNDEEP
selectfilterangularjscontrollerscope
Gab. B
Gab. B

Reputation: 3

Filtering a scope with multiple select in AngularJS


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!

Upvotes: 0

Views: 5659

Answers (2)

uxtx
uxtx

Reputation: 329

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.

Upvotes: 0

Ezekiel Victor
Ezekiel Victor

Reputation: 3876

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/

Upvotes: 2

Related Questions