Filter ng-Optionen aus ng-Optionen Auswahl

Question

Ich hoffe, drei Probleme zu lösen ...

In meiner App-Seite habe ich eine für Staaten und eine andere für Grafschaften auswählen. Für Staaten Ich habe:

<select ng-model="filter.stateID" ng-options="item.stateID as item.state for item in st_option"> 
</select> 

Daten:

[ 
    { state="California", stateID="5"}, 
    { state="Arizona", stateID="3"}, 
    { state="Oregon", stateID="38"}, 
    { state="Texas", stateID="44"}, 
    { state="Utah", stateID="45"}, 
    { state="Nevada", stateID="29"} 
] 

für meine Grafschaft wählen Ich habe:

<select ng-model="filter.countyID" ng-options="item.countyID as item.county for item in co_option"> 
</select> 

Daten:

[ 
    { county="Orange", countyID="191", co_state_id="5"}, 
    { county="Multiple Counties", countyID="3178", co_state_id="3"}, 
    { county="Sonoma", countyID="218", co_state_id="38"}, 
    { county="Los Angeles", countyID="190", co_state_id="44"} 
] 

Das ist mein ng-repeat:

<div ng-repeat="project in projects | filter:filter"> 
    <div> 
     State: {{project.state}}<br> 
     County: {{project.county}}<br> 
     <span ng-hide="{{project.stateID}}"></span> 
     <span ng-hide="{{project.countyID}}"></span> 
    </div> 
</div> 

So, wie Sie ich bin mit den stateID über den Zustand auswählen und auf dem Kreis wähle ich den entsprechenden Zustand id sehen in co_state_id in der Grafschaft Datensatz gesetzt habe.

würde Ich mag ein paar Dinge tun:

1. ausblenden wählen Sie den Kreis, bis ein Zustand ausgewählt ist.
2. Nach einem Zustand ausgewählt wird, Filtern der Kreisauswahloptionen von dem ausgewählten stateID/co_state_id
3. Filter die ng-repeat, indem zuerst die stateID, dann durch die countyID.

Ich habe auch keine Möglichkeit, durch eine Reihe filter.stateID zu true oder Filter zu setzen, anstatt einen String. Wenn ich nach stateID filtere, bekomme ich gemischte Ergebnisse, weil einige stateID '1' in ihnen haben können.

Answer 1

Normalerweise möchten Sie nur eine Frage per Post stellen, aber ich gebe diesen drei eine Aufnahme.

Teil 1: Fügen Sie einen ng-show für filter.stateID hinzu. Da Sie einen Zustand nicht abwählen können, können Sie eine einmalige Bindung verwenden, wenn Ihr eckiger Wert 1,3 ist.

<select ng-show="::filter.stateID" ng-model="filter.countyID" ng-options="item.countyID as item.county for item in co_option"> 

Teil 2: Fügen Sie Filter für {co_state_id : filter.stateID}

<select ng-show="::filter.stateID != null" ng-model="filter.countyID" ng-options="item.countyID as item.county for item in co_option | filter:{ co_state_id : filter.stateID }"> 

Teil 3:

Sie sind für das Filter das Muster-Objekt, Materie sollte nicht, wenn der Wert von Die ID ist 1:

Objekt: Ein Musterobjekt kann verwendet werden, um bestimmte Eigenschaften von Objekten zu filtern, die in einem Array enthalten sind. Zum Beispiel liefert das {Prädikat {Name: "M", Telefon: "1"} ein Array von Elementen, deren Eigenschaftsname "M" und Eigenschaftstelefon mit "1" enthält.Ein spezieller Eigenschaftsname $ kann verwendet werden (wie in {$: "text"}), um eine Übereinstimmung mit einer Eigenschaft des Objekts oder seinen verschachtelten Objekteigenschaften zu akzeptieren. Das entspricht der einfachen Teilzeichenfolge, die mit einer Zeichenfolge wie oben beschrieben übereinstimmt. Das Prädikat kann negiert werden, indem der Zeichenfolge ein Präfix vorangestellt wird. Zum Beispiel liefert das {Name: "! M"} - Prädikat ein Array von Elementen, deren Eigenschaftenname kein "M" enthält.

Arbeits Snippet

var app = angular.module('app', []); 
 

 
app.controller('myController', function($scope) { 
 
    $scope.projects = [{ 
 
    name: 'Project1', 
 
    state: 'CA', 
 
    stateID: '5', 
 
    county: 'Orange', 
 
    countyID: '191' 
 
    }, { 
 
    name: 'Project2', 
 
    state: 'CA', 
 
    stateID: '5', 
 
    county: 'LosAngeles', 
 
    countyID: '190' 
 
    }, { 
 
    name: 'Project3', 
 
    state: 'CA', 
 
    stateID: '5', 
 
    county: 'Orange', 
 
    countyID: '191' 
 
    }, { 
 
    name: 'Project4', 
 
    state: 'MadeUp', 
 
    stateID: '1', 
 
    county: 'MadeUp', 
 
    countyID: '190' 
 
    }]; 
 

 
    $scope.st_option = [{ 
 
    state: "California", 
 
    stateID: "5" 
 
    }, { 
 
    state: "Arizona", 
 
    stateID: "3" 
 
    }, { 
 
    state: "Oregon", 
 
    stateID: "38" 
 
    }, { 
 
    state: "Texas", 
 
    stateID: "44" 
 
    }, { 
 
    state: "Utah", 
 
    stateID: "45" 
 
    }, { 
 
    state: "Nevada", 
 
    stateID: "29" 
 
    }]; 
 

 
    $scope.co_option = [{ 
 
    county: "Orange", 
 
    countyID: "191", 
 
    co_state_id: "5" 
 
    }, { 
 
    county: "Multiple Counties", 
 
    countyID: "3178", 
 
    co_state_id: "3" 
 
    }, { 
 
    county: "Sonoma", 
 
    countyID: "218", 
 
    co_state_id: "38" 
 
    }, { 
 
    county: "Los Angeles", 
 
    countyID: "190", 
 
    co_state_id: "44" 
 
    }]; 
 

 
    $scope.filter = {}; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> 
 
<div ng-app='app' ng-controller='myController'> 
 
    <select ng-model="filter.stateID" 
 
      ng-options="item.stateID as item.state for item in st_option"></select> 
 
    <select ng-show="::filter.stateID" 
 
      ng-model="filter.countyID" 
 
      ng-options="item.countyID as item.county for item in co_option | filter:{ co_state_id : filter.stateID }"> 
 
    </select> 
 

 
    <div ng-repeat="project in projects | filter:filter"> 
 
    <div> 
 
     <br>Name: {{ project.name }} 
 
     <br>State: {{project.state}} 
 
     <br>County: {{project.county}} 
 
     <br> 
 
     <span ng-hide="{{project.stateID}} "></span> 
 
     <span ng-hide="{{project.countyID}} "></span> 
 
    </div> 
 
    </div> 
 
</div>