Filtern Sie einen Bereich mit mehreren wählen Sie in AngularJS

Hier ist mein fiddel: 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>

Den ersten wählen Sie "Filter", die zweite, sondern auch die Ergebnis-Liste.

Der zweite Filter auswählen, werden nur die Ergebnis-Liste.

Es funktioniert großartig, bis ein Land und eine Stadt ausgewählt werden. Dann, wenn Sie ein anderes Land, eine zweite select-hab reseted, aber der Umfang zu sein scheint, hängt mit dem alten Wert.

ich kann nicht finden, eine Möglichkeit zu haben, es funktioniert... Bitte um Hilfe!!

InformationsquelleAutor Gab. B | 2013-04-29

2

Die beste Lösung ist ein reset der city-Modell, wenn eine änderung an Land Modell ermittelt über $scope.$watch():
```
function MyCtrl($scope) {
    //...

    $scope.$watch('searchCountry', function() {
        $scope.searchCity = null;
    });
}
```
Beachten Sie, dass ich änderte Ihre Modell-Namen, um Einzahl ("searchCountry" und "searchCity"), die ist besser geeignet, bedenkt man den Wert dieser Modelle auf ein einzelnes Land oder Stadt.

Hier ist die vollständige Arbeit Beispiel: http://jsfiddle.net/evictor/mwrLc/13/
- In der Tat, das ist die Lösung. Ich habe es versucht, aber es funktioniert nicht mit JQM und JQMA-adapter installiert... ich kann nicht herausfinden, warum. Winkel-und JQM wirklich nicht passen gut zusammen. Funktioniert gut, ohne JQM auf.
- Könnte Sie post ein Turnschuh oder eine andere Frage? Ich wäre neugierig zu sehen, was JQM ist zu tun, um es Durcheinander!
- jsfiddle.net/mwrLc/17 Hier ist es. Wie Sie sehen können, die zweite Auswahl nie zurückgesetzt, nicht herausfinden können warum... Muss ein Thema aus dem Adapter.
- Meine Umbenennung von searchCountries => searchCountry und searchCities => searchCity warf Sie ab. Sie klebte mein snippet, aber nicht benennen Sie die Modelle, die entsprechend auch überall sonst. Hier ist die Feste fiddle mit Ihrer ursprünglichen Modellbezeichnungen: jsfiddle.net/evictor/mwrLc/18 (obwohl ich raten würde die Umbenennung searchCountries => searchCountry, etc. für die semantische Korrektheit).
InformationsquelleAutor Ezekiel Victor
0

Hesekiel Sieger Lösung ist ausgezeichnet. Aber ich lief in ein bisschen ein dependency-injection-Problem beim Versuch, diese zu arbeiten, wenn die Referenzierung der controller aus einem ng-include. Dank der Hilfe von Ben Tesser ich war in der Lage, das Problem zu beheben. Ive befestigt ein jsfiddle, die details des Updates:

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

der Hauptunterschied ist, dass Sie brauchen, um wickeln Sie die searchCountry/searchCity als ein Objekt und festlegen der default-Wert null. Dito für die Uhr.
```
  $scope.test = {
    searchCountry: null,
    searchCity: null
};
///And your watch statement ///
    $scope.$watch('test.searchCountry', function () {
        $scope.test.searchCity =  null;
});
```
In Ihrer Vorlage, die Sie ' ll ändern Sie alle Verweise von searchCountry/searchCity zu testen.searchCountry.

Ich hoffe das spart jemand einige Zeit. Es ist trixy.

InformationsquelleAutor uxtx

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.