AngularJS - Multile Level Checkboxes Issue

Question

I have multiple level of checkboxes in large groups. On clicking 1st level of Checkbox the Second level appears & on clicking 2nd level of checkboxes 3rd level appears.

When 1st level checkbox is unchecked all the inner levels of checkboxes should be unchecked.

I have used ng-if & ng-init to achieve this. But this is giving me problems while saving data.

enter image description here

I have large number of 1st level Checkboxes, so how do i clear or uncheck all the iner level checkboxes & radios in a simple way.

Calling a Method on ng-click & clearing model one by one will be very complicated. What is easy way out for this?

My Code :-

    <div ng-repeat="todo in todos" class="col-sm-12">
        <div class="col-sm-12">
            <input type="checkbox" ng-model="todo.level1" />
            <label>Level 1</label>
        </div>
        <div class="col-sm-12" ng-if="todo.level1">

<div class="col-sm-12">
                    <div class="col-sm-offset-1 col-sm-11" ng-if="todo.level1">
                        <input type="checkbox" ng-model="todo.c4" ng-init="todo.c4 = false" />
                        <label>&nbsp;C4</label>
                    </div>
                    <div class="col-sm-12" ng-if="todo.c4">
                        <div class="col-sm-12" ng-if="todo.c4">
                            <div class="margin-left-2">
                                <input type="checkbox" ng-model="todo.c4vert" ng-init="todo.c4vert = false" />
                                <label>&nbsp;Xyz</label>
                            </div>
                        </div>
                        <div class="col-sm-12" ng-if="todo.c4vert">
                            <div class="margin-left-3">
                                <select id="Select3">
                                    <option>Choose</option>
                                    <option>25%</option>
                                    <option>50%</option>                                    
                                </select>
                            </div>
                        </div>
                        <div class="col-sm-12" ng-if="todo.c4">
                            <div class="margin-left-2">
                                <input type="checkbox" ng-model="todo.c4post" ng-init="todo.c4post = false" />
                                <label>&nbsp;ABC</label>
                            </div>
                        </div>
                        <div class="col-sm-12" ng-if="todo.c4post">
                            <div class="margin-left-3">
                                <label>Quest?</label><br />
                                <input type="radio" value="Yes" ng-model="todo.c4postdisloc" ng-init="todo.c4postdisloc = false" /><label>&nbsp;Yes</label>
                                <input type="radio" value="No" ng-model="todo.c4postdisloc" ng-init="todo.c4postdisloc = false" /><label>&nbsp;No</label>
                            </div>
                        </div>
                        <div class="col-sm-12" ng-if="todo.c4post">
                            <div class="margin-left-3">
                                <label>Quest 2?</label><br />
                                <input type="radio" value="Yes" ng-model="todo.c4postspinal" ng-init="todo.c4postspinal = false" /><label>&nbsp;Yes</label>
                                <input type="radio" value="No" ng-model="todo.c4postspinal" ng-init="todo.c4postspinal = false" /><label>&nbsp;No</label>
                            </div>
                        </div>
                        <div class="col-sm-12" ng-if="todo.c4">
                            <div class="margin-left-2">
                                <input type="checkbox" ng-model="todo.c4trans" ng-init="todo.c4trans = false" />
                                <label>&nbsp;LMN</label>
                            </div>
                        </div>
                        <div class="col-sm-12" ng-if="todo.c4trans">
                            <div class="margin-left-3">
                                <label>TYU </label>
                                <br />
                                <input type="radio" value="Yes" ng-model="todo.c4transdisplace" ng-init="todo.c4transdisplace = false" /><label>&nbsp;Yes</label>
                                <input type="radio" value="No" ng-model="todo.c4transdisplace" ng-init="todo.c4transdisplace = false" /><label>&nbsp;No</label>
                            </div>
                        </div>
                    </div>
                </div>

        </div>
    </div>

Using ng-init gives me a problem, because values of checkboxes are loaded from db, ng-init makes all the values false.

link · Accepted Answer · 2014-06-30 05:47:19Z

1

You should bind the checkboxes to a model that contains true or false. Then use ng-show to hide/show the hierarchies. You can use a recursive function to reset all the models.

Here is a fiddle: http://jsfiddle.net/93R8e/17/

Markup:

<div ng-app="app" ng-controller="myCtrl">
    <div ng-repeat="checkbox in checkboxes">        
        <div>
            <input type="checkbox" ng-model="checkbox.checked" ng-change="actions.reset(checkbox)"/>
            <span ng-bind="checkbox.name"></span>
        </div>
        <div style="margin-left: 20px;" ng-repeat="checkboxLevel2 in checkbox.values" ng-show="checkbox.checked">
            <input type="checkbox" ng-model="checkboxLevel2.checked"/>
            <span ng-bind="checkboxLevel2.name"></span>
        </div>      
    </div>
</div>

JavaScript:

var app = angular.module('app', []);
app.controller('myCtrl', function($scope) {
    $scope.checkboxes = [
        { name: 'checkbox 1', checked: true, values: [ 
            { name: 'checkbox 1 - 1', checked: true },
            { name: 'checkbox 1 - 2', checked: true }
        ]},
        { name: 'checkbox 2', checked: false, values: [] }        
    ];

    $scope.actions = {
        reset: function (checkbox) {      
            if(!checkbox.hasOwnProperty('values') || checkbox.values.length === 0) {
                return;
            }

            for(var i = 0; i < checkbox.values.length; i ++) {
                checkbox.values[i].checked = false;
                $scope.actions.reset(checkbox.values[i]);
            }
        }
    };    

});

Hope this helps

edited Jun 30, 2014 at 5:47

answered Jun 30, 2014 at 5:35

link

2,5101 gold badge18 silver badges18 bronze badges

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

2 Comments

Anup Over a year ago

The Html used in ur example uses ng-repeat for checkboxes. In my scenario i cannot implement ng-repeat for checkboxes.

link Over a year ago

can you structure your data in a way that lends itself to doing so? You can also do ng-repeat over properties on an object if you have that instead of an array

Collectives™ on Stack Overflow

AngularJS - Multile Level Checkboxes Issue

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related