级联下拉列表angularjs

时间:2016-04-06 22:14:32

标签: javascript angularjs angularjs-ng-repeat

我试图让我的第二个下拉列表工作,但无法弄清楚问题是什么。第一个是显示数据,第二个是不起作用。

HTML:

<select class="form-control" 
   ng-options="option as option.label for option in myCtrl.options track by option._id" 
     ng-model="myCtrl.selected"></select>

<select ng-disabled="!myCtrl.selected" class="form-control">
    <option ng-repeat="child in myCtrl.options">@{{child.childs}}</option>
</select>

JS:

var vm = this;
vm.options = {};

//get populate data for cascading options
$http.get("data/support.json").success(function(response){
    vm.options = response;
    vm.selected = vm.options[0];
});

support.json

  [{
    "_id": "1",
    "label": "Title 1",
    "childs": [
      "Title 1 - sub 1",
      "Title 1 - sub 2"    
    ]
  },
  {
    "_id": "2",
    "label": "Title 2",
    "childs": [
      "Title 2 - sub 1",
      "Title 2 - sub 2" 
    ]
  }]

1 个答案:

答案 0 :(得分:3)

第二个应该是

<option ng-repeat="child in myCtrl.selected.childs">{{child}}</option>

如果您尝试显示所选父选项的子项。

此外,您的第一个选择可以将其选项简化为

ng-options="option.label for option in myCtrl.options track by option._id"