从 ng-options 选择中过滤 ng-options
Filter ng-options from ng-options selection
我希望解决三个问题...
在我的应用程序页面中,我有一个 select 用于州,另一个用于县。对于我有的州:
<select ng-model="filter.stateID" ng-options="item.stateID as item.state for item in st_option">
</select>
数据:
[
{ state="California", stateID="5"},
{ state="Arizona", stateID="3"},
{ state="Oregon", stateID="38"},
{ state="Texas", stateID="44"},
{ state="Utah", stateID="45"},
{ state="Nevada", stateID="29"}
]
我所在的县 select 我有:
<select ng-model="filter.countyID" ng-options="item.countyID as item.county for item in co_option">
</select>
数据:
[
{ 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"}
]
这是我的 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>
因此,如您所见,我在州 select 和县 select 上使用 stateID
我在 [=17= 中设置了相应的州 ID ]在县数据集中。
我想做几件事:
- 隐藏县 select 直到一个州被 selected。
- 州 selected 后,通过 selected
stateID
/ co_state_id
筛选县 select 选项
- 首先按
stateID
筛选 ng-repeat
,然后按 countyID
。
我也没有找到将 filter.stateID
设置为 true
或按数字而不是字符串过滤的方法。当我按 stateID 过滤时,我得到混合结果,因为某些 stateID
中可能有“1”..
通常每个 post 你只想问一个问题,但我会试一试这三个问题。
第 1 部分:为 filter.stateID
添加一个 ng-show
。由于您无法取消选择状态,因此如果您的 angular 是 ^1.3.
,则可以使用一次性绑定
<select ng-show="::filter.stateID" ng-model="filter.countyID" ng-options="item.countyID as item.county for item in co_option">
第 2 部分:为 {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 }">
第 3 部分:
您正在使用过滤器的模式对象,id 的值为 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".
工作代码段
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>
我希望解决三个问题...
在我的应用程序页面中,我有一个 select 用于州,另一个用于县。对于我有的州:
<select ng-model="filter.stateID" ng-options="item.stateID as item.state for item in st_option">
</select>
数据:
[
{ state="California", stateID="5"},
{ state="Arizona", stateID="3"},
{ state="Oregon", stateID="38"},
{ state="Texas", stateID="44"},
{ state="Utah", stateID="45"},
{ state="Nevada", stateID="29"}
]
我所在的县 select 我有:
<select ng-model="filter.countyID" ng-options="item.countyID as item.county for item in co_option">
</select>
数据:
[
{ 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"}
]
这是我的 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>
因此,如您所见,我在州 select 和县 select 上使用 stateID
我在 [=17= 中设置了相应的州 ID ]在县数据集中。
我想做几件事:
- 隐藏县 select 直到一个州被 selected。
- 州 selected 后,通过 selected
stateID
/co_state_id
筛选县 select 选项
- 首先按
stateID
筛选ng-repeat
,然后按countyID
。
我也没有找到将 filter.stateID
设置为 true
或按数字而不是字符串过滤的方法。当我按 stateID 过滤时,我得到混合结果,因为某些 stateID
中可能有“1”..
通常每个 post 你只想问一个问题,但我会试一试这三个问题。
第 1 部分:为 filter.stateID
添加一个 ng-show
。由于您无法取消选择状态,因此如果您的 angular 是 ^1.3.
<select ng-show="::filter.stateID" ng-model="filter.countyID" ng-options="item.countyID as item.county for item in co_option">
第 2 部分:为 {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 }">
第 3 部分:
您正在使用过滤器的模式对象,id 的值为 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".
工作代码段
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>