级联选择/下拉菜单

Posted 2023-03-05

【中文标题】级联选择/下拉菜单

【英文标题】：Cascading select/dropdowns

【发布时间】：2013-09-14 10:15:43

【问题描述】：

我正在尝试使用 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>

控制器

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];

【参考方案1】：

你不需要看这个..它比那更容易。注释掉过滤器，然后更改您的 ng-option，如下所示。请注意，您的最后一个过滤器看起来使用了错误的父 ID（第三个下拉框是否与其父或祖父相关？）

<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>

【讨论】：

这就是我之前让孩子下拉的方式，而不是使用“filteredArray”数组，而是使用 $scope.selectedChildItem = $scope.childItems[0]。这会产生与原始结果相同的结果，但我希望将过滤列表中的第一项分配为 $scope.selectedChildItem。

不确定我是否听懂了你的意思……你想要这样的东西吗？ link 这取决于所有三个数组中的第一项一起作为您的默认选项。

很抱歉给您带来了困惑。最终，我希望任何“子”下拉列表进行过滤，并在父下拉列表更改时选择过滤列表中的第一项。我的 jsFiddle 示例正确进行了过滤，但将子下拉列表留空，而不是显示第一项。前任。将父下拉列表从“父 00”更改为“父 01”。右侧的下拉列表已将其原始数组过滤为“child0 of 01”和“child1 of 01”，但初始选择为空白。我希望选择“child0 of 01”，以便孙子下拉菜单也将过滤（并选择“grandChild0 of 01”）。

Example I tried to mirror 但不起作用

哦，好吧，然后回到手表上。对不起这里的圈子。也许就是这样？ link