级联选择/下拉菜单

时间:2013-09-10 15:44:32

标签: javascript jquery html angularjs

我正在尝试使用AngularJS创建一个链式/级联下拉列表(选择元素),但是我很难使用我的对象属性过滤和更新“选定”属性。

首次加载页面时,所选项目将被过滤并正确显示在下拉列表中。一旦我更改了父下拉列表,子选择项就不会获取已过滤列表中的第一项,导致孙子下拉列表无法更新。

我将非常感谢任何见解,并注意我将父/子/孙子数组分开(而不是在子数组中),因为我最终会从SQL中的单独spocs / tables中提取数据。如果有一种简单的方法可以在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 个答案:

答案 0 :(得分:29)

你不需要手表......它比那更容易。注释掉过滤器,然后更改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>