filtro NG-opzioni dal selezione NG-opzioni

Question

Spero di risolvere i tre problemi ...

Nella mia pagina app ho una selezione per gli stati e un altro per le contee. Per gli stati che ho:

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

dati:

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

Per il mio County selezionare ho:

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

dati:

[ 
    { 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"} 
] 

Questo è il mio 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> 

Quindi, come si può vedere che sto usando il stateID sullo stato di selezione e sulla contea selezionare Ho corrispondente id stato impostato nel co_state_id nel set di dati della contea.

mi piacerebbe fare un paio di cose:

1. Nascondi contea selezionare fino a selezionare uno stato.
2. Dopo aver selezionato uno stato, filtrare le opzioni selezionate contea dal selezionato stateID/co_state_id
3. Filter ng-repeat dapprima il stateID, poi dal countyID.

Inoltre non ho vedere un modo per impostare filter.stateID a true o filtra per un numero invece di una stringa. quando filtro da stateID ottengo risultati misti perché alcuni stateID 's possono avere "1" in loro ..

Answer 1

Di solito si desidera solo fare una domanda per post, ma darò a questi tre uno scatto.

Parte 1: Aggiungere un ng-show per filter.stateID. Dal momento che non è possibile deselezionare uno stato, è possibile utilizzare un binding una tantum se la propria angolare è^1.3.

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

Parte 2: Aggiungi filtro per {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 }"> 

Parte 3:

Si utilizza il modello oggetto per il filtro, non dovrebbe importare se il valore di l'ID è 1:

Oggetto: un oggetto modello può essere utilizzato per filtrare proprietà specifiche sugli oggetti contenuti in serie. Ad esempio {name: "M", telefono: il predicato "1"} restituirà un array di elementi che hanno il nome della proprietà contenente "M" e il telefono di proprietà contenente "1".Può essere usato un nome di proprietà speciale $ (come in {$: "testo"}) per accettare una corrispondenza con qualsiasi proprietà dell'oggetto o le sue proprietà dell'oggetto nidificato. È equivalente alla semplice sottostringa con una stringa come descritto sopra. Il predicato può essere negato prefissando la stringa con!. Ad esempio {name: il predicato "! M"} restituirà un array di elementi che hanno il nome della proprietà che non contiene "M".

lavoro 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>