级联选择/下拉列表 [英] Cascading select/dropdowns
问题描述
我正在尝试使用 AngularJS 创建一个链式/级联下拉列表(选择元素)，但我无法使用我的对象属性过滤和更新选定"属性.
当页面首次加载时，所选项目会被过滤并正确显示在下拉列表中.一旦我更改了父下拉列表，子选中的项不会抓取过滤列表中的第一项，从而导致孙子下拉列表不更新.
任何见解将不胜感激，并注意我将父/子/孙数组分开(而不是在子数组中)，因为我最终将从 SQL 中的单独 spocs/表中提取我的数据.如果有一种简单的方法可以在 JSON 中创建子数组，那么我愿意更改数据结构.
这是链接代码示例
HTML
</选择><div><选择ng-model="selectedChildItem"ng-options="c.displayName for c in filtersArray | filter:{parentId:selectedParentItem.id}"></选择>
<div><选择ng-model="selectedGrandChildItem"ng-options="g.displayName for g in grandChildItems | filter:{parentId:selectedChildItem.parentId}"></选择>
控制器
function dropdownCtrl($scope, filterFilter) {$scope.parentItems = [{身份证":0，"displayName": "父 00"},{身份证":1，"displayName": "父 01"},{身份证":2，"displayName": "父 02"}];$scope.selectedParentItem = $scope.parentItems[0];$scope.childItems = [{身份证":0，"displayName": "child0 of 00",父 ID":0},{身份证":1，"displayName": "child1 of 00",父 ID":0},{身份证":2，"displayName": "child2 of 00",父 ID":0},{身份证":3，"displayName": "child0 of 01",父 ID":1},{身份证":4，"displayName": "child1 of 01",父 ID":1},{身份证":5，"displayName": "child0 of 02",父 ID":2}];$scope.filteredArray = [];$scope.$watch("parentId", function (newValue) {$scope.filteredArray = filterFilter($scope.childItems, newValue);$scope.selectedChildItem = $scope.filteredArray[0];}，真的);$scope.grandChildItems = [{身份证":0，"displayName": "grandChild0 of 00",父 ID":0},{身份证":1，"displayName": "grandChild1 of 00",父 ID":0},{身份证":2，"displayName": "grandChild2 of 00",父 ID":0},{身份证":3，"displayName": "grandChild0 of 01",父 ID":1},{身份证":4，"displayName": "grandChild1 of 01",父 ID":1},{身份证":5，"displayName": "grandChild0 of 02",父 ID":2}];$scope.selectedGrandChildItem = $scope.grandChildItems[0];}你不需要看这个……比那更容易.注释掉过滤器，然后更改您的 ng-option，如下所示.请注意，您的最后一个过滤器似乎使用了错误的父 ID(第三个下拉框是否与其父或祖父相关?)
<选择类=形式控制"ng-model="selectedParentItem"ng-options="p.displayName for p in parentItems"></选择><选择类=形式控制"ng-model="selectedChildItem"ng-options="c.displayName for c in childItems | filter:{parentId: selectedParentItem.id}"></选择><选择类=形式控制"ng-model="selectedGrandChildItem"ng-options="g.displayName for g in grandChildItems | filter:{parentId: selectedChildItem.parentId}"></选择>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屋！
