Cascading dropdownlist angularjs

Question

im trying to get my second dropdownlist to work, but cant figure out what is the problem. The first one is showing the data, byt the second is not working.

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" 
    ]
  }]

James Buck · Accepted Answer · 2016-04-06 22:21:15Z

3

The second one should be

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

If you are trying to display the children of the selected parent option.

Also, your first select can have its options simplified to

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

answered Apr 6, 2016 at 22:21

James Buck

1,6409 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Cascading dropdownlist angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related