CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeat
Pedro
Pedro

Reputation: 1477

Cascading dropdownlist angularjs

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

Upvotes: 0

Views: 592

Answers (1)

James Buck
James Buck

Reputation: 1640

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"

Upvotes: 3

Related Questions