I'm new to AngularJS and MVC frameworks in general, so I am hoping someone can be a huge help. I have a use case where I have an array of objects and each one contains an array of children. I need to display the top level objects as radio buttons and their children as checkboxes. I have the basic view rendering with embedded ng-repeats, but I need to add some simple behavior. The idea is that the child checkboxes would be disabled (grayed out) if it's parent isn't checked. So, once a different radio button is selected, all other checkboxes would be disabled, except for its children. I could slap some jquery in here to do it, but I believe this might be possible with pure AngularJS.
HTML:
<div ng-controller="OrgListCtrl">
<div ng-repeat="org in orgs">
<label><input type="radio" name="temp"/> {{org.Name}}</label>
<section ng-repeat="child in org.children">
<label><input type="checkbox" class="orgCheckbox"/> {{child.Name}}</label>
</section>
<hr/>
</div>
</div>
Javascript:
function OrgListCtrl($scope) {
$scope.orgs = [
{
"Id" : "ada7a436",
"Name" : "Organization 1",
"children" : [{
"Id" : "aa556aea",
"Name" : "Org 1 Location 1",
"children" : []
}, {
"Id" : "0dd8d34a",
"Name" : "Org 1 Location 2",
"children" : []
}, {
"Id" : "d8315566",
"Name" : "Org 1 Location 3",
"children" : []
}
]
}, {
"Id" : "5ab3e566",
"Name" : "Organization 2",
"children" : [{
"Id" : "5cae66aa",
"Name" : "Org 2 Location 1",
"children" : []
}, {
"Id" : "16b8ec35",
"Name" : "Org 2 Location 2",
"children" : []
}, {
"Id" : "53adb4ba",
"Name" : "Org 2 Location 3",
"children" : []
}
]
}
];
}
As observed in this StackOverflow Q&A, you need to have your radio buttons update a shared model, and then you can base the disabled state of your checkboxes on the state of that model. So in your controller, you can add this line before you set up your $scope.orgs:
$scope.selected = {id: ''};
Next, change your radio button tags so they look like this:
<input type="radio" name="temp" ng-model="selected.id" value="{{org.Id}}"/>
Finally, add the ng-disabled directive to your checkboxes:
<input type="checkbox" class="orgCheckbox" ng-disabled="selected.id != org.Id"/>
And that should do it.
EDIT: My original code had a simple model value, "selectedId," placed directly on the $scope, which of course violates the "always have a dot in your ng-models" rule, as recounted in the Noob Handbook. Corrected now so that the selection is an object in which the model value is a subsidiary "id" property.