我有两个选择下拉列表,其中第二个选项中的选项取决于在第一个选择中选择的选项.
目前我正试图找出应该从服务器返回数据的方式,这取决于我设置过滤器的方式.
对于使用多个选择下拉列表过滤数据结构的最佳实践,我将不胜感激.
以防万一我正在开发/测试当前稳定版本的AngularJS(v1.3.15).
数据结构1 – 嵌套：
$scope.optionObjs = [
{
id: 1,name: 'option 1',desc: '',elements: [
{ id: 9,name: 'option 11',},{ id: 10,name: 'option 12',{ id: 11,name: 'option 13',{ id: 12,name: 'option 14',{ id: 13,name: 'option 15',],];
我希望在我的html中使用角度过滤器,如下面的例子,但似乎没有用.
<select data-ng-model="firstSelect" data-ng-options="option.name for option in optionObjs"></select> <select data-ng-model="secondSelect" data-ng-options="option.elements.name for option in optionObjs | filter:firstSelect"></select>
更新：
好的,这对我来说太傻了.所有上述数据结构都遵循我的要求是对第二个选择html的简单更改(不需要自定义过滤器功能).
<select data-ng-model="firstSelect" data-ng-options="option.name for option in optionObjs"></select> <select data-ng-model="secondSelect" data-ng-options="option.name for option in firstSelect.elements"></select>
就这些. D’哦！
数据结构2 – w /父参考：
$scope.optionObjs = [
{ id: 1,parent: null,{ id: 9,parent: 1,];
继续这个例子,我将不得不为第一个选择编写一个过滤器,只显示那些没有父引用的选项.
<select data-ng-model="firstSelect" data-ng-options="option.name for option in optionObjs | filter:parent=null"></select> <select data-ng-model="secondSelect" data-ng-options="option.elements.name for option in optionObjs | filter:firstSelect"></select>
更新：
考虑到@adamjld的建议并使用Angular过滤器进行了一些实验,我提出了以下html更新以配合上述数据结构(不需要自定义过滤器功能).
<select data-ng-model="firstSelect" data-ng-options="option.name for option in optionObjs | filter : { parent: null,}"></select>
<select data-ng-model="secondSelect" data-ng-options="option.elements.name for option in optionObjs | filter : { parent: firstSelect.id,}"></select>
虽然这是一个更简单的解决方案,但在初始加载时存在轻微问题.因为我没有将firstSelect初始化为我的控制器中的作用域对象,所以第二个选择框允许用户选择他们想要的任何选项.但是,只要在第一个选择框中选择了一个选项,第二个选择框选项就会被过滤,并且只显示(父)firstSelect.id的相应选项.
参考
以防人们开始抱怨我根本没有使用搜索这里有一些参考：
angular filter
ng-repeat :filter by single field
解决方法
我认为这将做你想要的..我编辑了数据,以显示它运作得更好.我将您的数据拆分为两个数组,父和子.
$scope.parentOptionObjs = [{
id: 1,desc: ''
},{
id: 2,name: 'option 2',desc: ''
}];
$scope.childOptionObjs = [{
parent: 1,id: 9,{
parent: 1,id: 10,id: 11,{
parent: 2,id: 12,id: 13,desc: ''
}];
});
现在使用以下过滤器通过父项的ID过滤子项.
app.filter('secondDropdown',function () {
return function (secondSelect,firstSelect) {
var filtered = [];
if (firstSelect === null) {
return filtered;
}
angular.forEach(secondSelect,function (s2) {
if (s2.parent == firstSelect) {
filtered.push(s2);
}
});
return filtered;
};
});
