级联选择/下拉列表 [英] Cascading select/dropdowns
问题描述
我试图创建一个链接/级联下拉（选择元素），使用AngularJS，但我有困难过滤和我对象属性更新'选择'属性。
当第一次加载页面，选定的项目进行过滤，并在下拉列表正确显示。有一次，我更改父下拉，孩子选择的项目不抢过滤列表中的第一项，导致孙子下拉不更新。
任何有识之士将大大AP preciated，请注意，我的父/子/孙阵列分离（而不是在子阵列），因为我最终会从不同的spocs /表中的SQL拉着我的数据。如果有一个简单的方法来创建JSON子阵列的话，我会很愿意改变的数据结构。
下面的一个链接到codeD例如
HTML
＆LT; DIV NG控制器=dropdownCtrl＆GT;
＆LT; DIV＆GT;
＆LT;选择
NG-模式=selectedParentItem
NG-选项=p.displayName在parentItems P＆GT;
＆LT; /选择＆GT;
＆LT; / DIV＆GT;
＆LT; DIV＆GT;
＆LT;选择
NG-模式=selectedChildItem
NG-选项=c.displayName在filteredArray B |过滤器：{parentId的：
selectedParentItem.id}＆GT;
＆LT; /选择＆GT;
＆LT; / DIV＆GT;
＆LT; DIV＆GT;
＆LT;选择
NG-模式=selectedGrandChildItem
NG-选项=g.displayName在grandChildItems G |过滤器：{parentId的：
selectedChildItem.parentId}＆GT;
＆LT; /选择＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
控制器
函数dropdownCtrl（$范围，filterFilter）{
$ scope.parentItems = [
{
ID：0，
显示名：父00
}，
{
标识：1，
显示名：父01
}，
{
ID：2，
显示名：父02
}
];
$ scope.selectedParentItem = $ scope.parentItems [0];$ scope.childItems = [
{
ID：0，
显示名：00 child0
parentId的：0
}，
{
标识：1，
显示名：00 child1
parentId的：0
}，
{
ID：2，
显示名：00的child2
parentId的：0
}，
{
ID：3，
显示名：01 child0
parentId的：1
}，
{
ID：4，
显示名：01 child1
parentId的：1
}，
{
ID：5，
显示名：02 child0
parentId的：2
}
];
$ scope.filteredArray = [];
$范围。$表（parentId的功能（newValue）以{
$ scope.filteredArray = filterFilter（$ scope.childItems，为newValue）;
$ scope.selectedChildItem = $ scope.filteredArray [0];
}，真正）;
$ scope.grandChildItems = [
{
ID：0，
显示名：00 grandChild0
parentId的：0
}，
{
标识：1，
显示名：00 grandChild1
parentId的：0
}，
{
ID：2，
显示名：00 grandChild2
parentId的：0
}，
{
ID：3，
显示名：01 grandChild0
parentId的：1
}，
{
ID：4，
显示名：01 grandChild1
parentId的：1
}，
{
ID：5，
显示名：02 grandChild0
parentId的：2
}
];
$ scope.selectedGrandChildItem = $ scope.grandChildItems [0];
}
您不需要在这个手表..它比这更容易。注释掉过滤器，然后改变你的NG选项，如下图所示。请注意，您的最后一个过滤器看起来像它使用的是错误的父ID（请问thirddrop下拉框涉及到其父母，祖父母父母？）
＆LT;选择
类=表格控
NG-模式=selectedParentItem
NG-选项=p.displayName在parentItems P＆GT;
＆LT; /选择＆GT;＆LT;选择
类=表格控
NG-模式=selectedChildItem
NG-选项=c.displayName对于C在childItems |过滤器：{parentId的：selectedParentItem.id}＆GT;
＆LT; /选择＆GT;＆LT;选择
类=表格控
NG-模式=selectedGrandChildItem
NG-选项=g.displayName为克grandChildItems |过滤器：{parentId的：selectedChildItem.parentId}＆GT;
＆LT; /选择＆GT;
I'm attempting to create a chained/cascading drop-down (select elements) using AngularJS but I'm having difficulty filtering and updating the 'selected' properties with my object properties.
When the page first loads, the selected items are filtered and displaying in the drop-downs properly. Once I change the parent drop-down, the child selected item doesn't grab the first item in the filtered list, causing the grandchild drop-down to not update.
Any insight would be greatly appreciated and note that I have the parent/child/grandchild arrays separated (and not in sub-arrays) because I will eventually be pulling my data from separate spocs/tables in SQL. If there is an easy way to create the sub-arrays in JSON then I'd be willing to change the data structure.
Here's a link to a coded example
HTML
<div ng-controller="dropdownCtrl" >
<div>
<select
ng-model="selectedParentItem"
ng-options="p.displayName for p in parentItems">
</select>
</div>
<div>
<select
ng-model="selectedChildItem"
ng-options="c.displayName for c in filteredArray | filter:{parentId:
selectedParentItem.id}">
</select>
</div>
<div>
<select
ng-model="selectedGrandChildItem"
ng-options="g.displayName for g in grandChildItems | filter:{parentId:
selectedChildItem.parentId}">
</select>
</div>
</div>
Controller
function dropdownCtrl($scope, filterFilter) {
$scope.parentItems = [
{
"id": 0,
"displayName": "parent 00"
},
{
"id": 1,
"displayName": "parent 01"
},
{
"id": 2,
"displayName": "parent 02"
}
];
$scope.selectedParentItem = $scope.parentItems[0];
$scope.childItems = [
{
"id": 0,
"displayName": "child0 of 00",
"parentId": 0
},
{
"id": 1,
"displayName": "child1 of 00",
"parentId": 0
},
{
"id": 2,
"displayName": "child2 of 00",
"parentId": 0
},
{
"id": 3,
"displayName": "child0 of 01",
"parentId": 1
},
{
"id": 4,
"displayName": "child1 of 01",
"parentId": 1
},
{
"id": 5,
"displayName": "child0 of 02",
"parentId": 2
}
];
$scope.filteredArray = [];
$scope.$watch("parentId", function (newValue) {
$scope.filteredArray = filterFilter($scope.childItems, newValue);
$scope.selectedChildItem = $scope.filteredArray[0];
},true);
$scope.grandChildItems = [
{
"id": 0,
"displayName": "grandChild0 of 00",
"parentId": 0
},
{
"id": 1,
"displayName": "grandChild1 of 00",
"parentId": 0
},
{
"id": 2,
"displayName": "grandChild2 of 00",
"parentId": 0
},
{
"id": 3,
"displayName": "grandChild0 of 01",
"parentId": 1
},
{
"id": 4,
"displayName": "grandChild1 of 01",
"parentId": 1
},
{
"id": 5,
"displayName": "grandChild0 of 02",
"parentId": 2
}
];
$scope.selectedGrandChildItem = $scope.grandChildItems[0];
}
You don't need a watch on this.. its easier than that. Comment out the filter, then change your ng-option as shown below. note, your last filter looked like it is using the wrong parent id (does the thirddrop down box relate to its parent or grand parent?)
<select
class="form-control"
ng-model="selectedParentItem"
ng-options="p.displayName for p in parentItems">
</select>
<select
class="form-control"
ng-model="selectedChildItem"
ng-options="c.displayName for c in childItems | filter:{parentId: selectedParentItem.id}">
</select>
<select
class="form-control"
ng-model="selectedGrandChildItem"
ng-options="g.displayName for g in grandChildItems | filter:{parentId: selectedChildItem.parentId}">
</select>
这篇关于级联选择/下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
