angularjs - Dynamic form with parent child combos -

i new angularjs , after watching pluralsight videos decided build simple web page using it.

the page should load 1 select box populated ajax request (this contains of data). then, based on value selected, new select element may need created containing child data. continue happen until option selected has no child ids. format of data api follows.

[ { "childids" : [  ],     "id" : "1",     "name" : "top level",     "parentid" : null   },   { "childids" : [ "51" ],     "id" : "22",     "name" : "levela - 1",     "parentid" : "1"   },   { "childids" : [ "38",         "26"       ],     "id" : "24",     "name" : "levela - 2",     "parentid" : "1"   },   { "childids" : [  ],     "id" : "38",     "name" : "levelb - 1",     "parentid" : "24"   },   { "childids" : [  ],     "id" : "26",     "name" : "levelb - 2",     "parentid" : "24"   },   { "childids" : [  ],     "id" : "51",     "name" : "levelb - 3",     "parentid" : "22"   },   { "childids" : [ "43",         "21"       ],     "id" : "36",     "name" : "levelc - 1",     "parentid" : "26"   },   { "childids" : [  ],     "id" : "43",     "name" : "leveld - 1",     "parentid" : "36"   },   { "childids" : [  ],     "id" : "21",     "name" : "leveld -2",     "parentid" : "36"   } ] 

i have managed working using hard coded select elements want make dynamic.

html

<div class="container">         <div ng-controller="organisationalunitctrl">             <select class="form-control" ng-model="root" ng-options="ou.name ou in ous | filter:{parentid:'!'}">                 <option value="">-- choose organisation unit --</option>             </select>             <select class="form-control" ng-model="child" ng-options="ou.name ou in ous | filter:{parentid:root.id}">                 <option value="">-- choose organisation unit --</option>             </select>             <select class="form-control" ng-model="child2" ng-options="ou.name ou in ous | filter:{parentid:child.id}">                 <option value="">-- choose organisation unit --</option>             </select>             <select class="form-control" ng-model="child3" ng-options="ou.name ou in ous | filter:{parentid:child2.id}">                 <option value="">-- choose organisation unit --</option>             </select>         </div>     </div> 

controller

bristowriskapp.controller('organisationalunitctrl',     function organisationalunitctrl($scope, organisationalunitdata) {         $scope.ous = organisationalunitdata.getorganisationalunit();     } ); 

service

bristowriskapp.factory('organisationalunitdata', function ($http, $q) {     return {         getorganisationalunit: function () {             var deferred = $q.defer();              $http({ method: 'get', url: 'http://localhost:53995/api/organisationalunit' }).                 success(function (data, status, headers, config) {                     deferred.resolve(data);                 }).                 error(function (data, status, headers, config) {                     deferred.reject(status);                 });              return deferred.promise;         }     } }); 

i have read should not manipulate dom in controller. so, guessing should create directive select element listens onchange events , creates new select element? how do this? there examples out there learn from?

one other issue face hard coded example changing value in select ripples next combo. example, if values selected in 4 select boxes, changing value in second 1 correctly reset third box fourth still contain selected option. thought change rippled way down.

thanks

steven

let me know if/why doesn't work , i'll fix accordingly. think key fact in options repeater weren't using syntax specify id of option - doing label.

http://jsfiddle.net/kvdqb/

html

<div ng-app="bristowriskapp" ng-controller="organisationalunitctrl">     $scope.selections: <pre>{{ selections | json }}</pre>     <div ng-repeat="i in range(selections.length - 1)">         <cascade-select data="data" parent-id="selections[i]" selected-id="selections[i + 1]"></cascade-select>     </div> </div> 

javascript

var bristowriskapp = angular.module('bristowriskapp', []);  bristowriskapp.controller('organisationalunitctrl',  function organisationalunitctrl($scope) {     $scope.data = [ /* ... */ ];      $scope.selections = [ null, null ];      $scope.$watch('selections', function (value) {         if (value[value.length - 1] !== null || value.length < 2) {             value.push(null);         } else {             var index = value.indexof(null, 1);             if (0 < index && index < value.length - 1) {                 $scope.selections = value.slice(0, index);             }         }      }, true);      // helper function.         $scope.range = function (n) {         var result = [];          (var = 0 ; <n; i++) {             result.push(i);         }          return result;     }; });  bristowriskapp.directive('cascadeselect', function () {     return {         restrict: 'e',         replace: true,         scope: {             parentid: '&',             selectedid: '=',             data: '='         },         template: '<select ng-show="(data | filter:byid).length > 0" ng-model="selectedid" ng-options="d.id d.name d in data | filter:byid"><option value="">-- choose organisation unit --</option></select>',         link: function (scope, element, attrs) {             scope.byid = function (d) {                 return d.parentid === scope.parentid();             };         }     } });