Dynamic form with parent child combos - angularjs

Question

I am very new to AngularJS and after watching some pluralsight videos I decided to build a simple web page using it.
The page should initially load with one select box which is populated by an ajax request (this contains all of the data). Then, based on the value selected, a new select element may need to be created containing the child data. This will continue to happen until an option is selected that has no child ids. The format of data I get back from the api is as 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 to get this working by using hard coded select elements but want to make this dynamic.
Html
<div class="container">
<div ng-controller="organisationalUnitCtrl">
<select class="form-control" ng-model="root" ng-options="ou.Name for ou in ous | filter:{ParentId:'!'}">
<option value="">-- choose organisation unit --</option>
</select>
<select class="form-control" ng-model="child" ng-options="ou.Name for 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 for 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 for 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 that you should not manipulate the DOM in the controller. So, I am guessing that I should create a directive for my select element that listens for onChange events and creates the new select element? How do I do this? Are there any examples out there that I could learn from?
One other issue I face with my hard coded example is that changing a value in a select only ripples to the next combo. For example, if values were selected in all four select boxes, changing a value in the second one would correctly reset the third box but the fourth will still contain the selected option. I thought the change would be rippled all the way down.
Thanks
Steven

Answer 1

Let me know if/why this doesn't work and I'll fix it accordingly. I think the key fact is in the options repeater you weren't using the syntax to specify the ID of the option - you were just doing its 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 = [];
for (var i = 0 ; i <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 as d.Name for 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();
};
}
}
});