问题
I'm hoping to solve three problems...
In my app page I have one select for states and another for counties. For states I have:
<select ng-model="filter.stateID" ng-options="item.stateID as item.state for item in st_option">
</select>
Data:
[
{ state="California", stateID="5"},
{ state="Arizona", stateID="3"},
{ state="Oregon", stateID="38"},
{ state="Texas", stateID="44"},
{ state="Utah", stateID="45"},
{ state="Nevada", stateID="29"}
]
For my County select I have:
<select ng-model="filter.countyID" ng-options="item.countyID as item.county for item in co_option">
</select>
Data:
[
{ 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"}
]
This is my 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, as you can see I'm using the stateID
on the state select and on the county select I have the corresponding state id set in co_state_id
in the county data set.
I'd like to do a few things:
- Hide the county select until a state is selected.
- After a state is selected, filter the county select options by the selected
stateID
/co_state_id
- Filter the
ng-repeat
by first thestateID
, then by thecountyID
.
I also haven't see a way to set filter.stateID
to true
or filter by a number instead of a string. when I filter by stateID I get mixed results because some stateID
's can have "1" in them..
回答1:
Usually you only want to ask one question per post but i'll give these three a shot.
Part 1: Add an ng-show
for filter.stateID
. Since you can't deselect a state, you can use a one time binding if your angular is ^1.3.
<select ng-show="::filter.stateID" ng-model="filter.countyID" ng-options="item.countyID as item.county for item in co_option">
Part 2: Add filter for {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 }">
Part 3:
You are using the pattern object for the filter, shouldn't matter if the value of the id is 1:
Object: A pattern object can be used to filter specific properties on objects contained by array. For example {name:"M", phone:"1"} predicate will return an array of items which have property name containing "M" and property phone containing "1". A special property name $ can be used (as in {$:"text"}) to accept a match against any property of the object or its nested object properties. That's equivalent to the simple substring match with a string as described above. The predicate can be negated by prefixing the string with !. For example {name: "!M"} predicate will return an array of items which have property name not containing "M".
Working 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>
来源:https://stackoverflow.com/questions/29332760/filter-ng-options-from-ng-options-selection