AngularJS: Correct Design for Nested Loops, Data Binding, and Basic Behavior

Question

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" : []
                }
            ]
        }
    ];
}

http://jsfiddle.net/CrLRN/

Community · Accepted Answer · 2017-05-23 11:50:09Z

0

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.

edited May 23, 2017 at 11:50

CommunityBot

11 silver badge

answered Mar 19, 2013 at 4:30

Jollymorphic

3,53018 silver badges16 bronze badges

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

6 Comments

Mike L. Over a year ago

Thanks for the reply. It's close, but not exactly working. The checkboxes are not disabled when I select a different radio button. jsfiddle.net/CrLRN/1

Jollymorphic Over a year ago

EDIT! @Mike L: Thanks for spotting that. I had violated a rule that's right there in the Noob Handbook. Anyhow, this correction works now, as tested in your Fiddle.

Mike L. Over a year ago

Awesome, that did it! Thanks for the correction and the working solution. I know disabled form fields aren't submitted in a form, but out of curiosity, is it possible to also uncheck the checkboxes along with disabling them when another radio is selected? Don't worry too much, I'm just curious. You've been a huge help already! Thanks again!

Jollymorphic Over a year ago

You're very welcome! As for the checkbox changes, you'd probably want to bind your checkboxes to some kind of models so you could just change those model values to uncheck them all, then maybe have a $watch listener react to "selected.id" changes by falsifying those model values for ineligible checkbox groups.

Mike L. Over a year ago

Thanks for the guidance. I got something to work, but I'm not sure it's the most efficient since it requires embedded loops. Can you think of a better way than this: jsfiddle.net/CrLRN/3

|

Collectives™ on Stack Overflow

AngularJS: Correct Design for Nested Loops, Data Binding, and Basic Behavior

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related