我正在尝试使用 AngularJS 创建一个链式/级联下拉菜单(选择元素),但我在使用我的对象属性过滤和更新“选定”属性时遇到了困难。
当页面首次加载时,所选项目将被过滤并正确显示在下拉列表中。更改父下拉列表后,子选择项不会获取过滤列表中的第一项,导致孙下拉列表不更新。
任何见解将不胜感激,请注意我将父/子/孙数组分开(而不是在子数组中),因为我最终将从 SQL 中的单独 spocs/表中提取数据。如果有一种简单的方法可以在 JSON 中创建子数组,那么我愿意更改数据结构。
这是 a link编码示例
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];
}
最佳答案
你不需要 watch ..它比那容易。注释掉过滤器,然后更改您的 ng-option,如下所示。请注意,您的最后一个过滤器看起来使用了错误的父 ID(第三个下拉框是否与其父或祖 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>
关于javascript - 级联选择/下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18723399/