mercredi 23 novembre 2016

How to use nested checkbox selection in angular js?

I am using angular js. i have faced some problem in case of nested checkbox uses. In my problem i m stuck on to how to use IncludeAll on click checkbox. If checkbox value is true then it's give me a value of that. if IncludeAll checkbox is true then all checkbox will be selected and show the value of all in Array. and if one of the checkbox is false then IncludeAll checkbox false

<ul class="tree" id="tree" ng-repeat="(key,value) in items">
    <li>
        <input type="checkbox" value="" ng-checked="value.checked" ng-model="value.selected" ng-change="changeCheckAll()" /> 
    <!-- AND SHOULD CHECK HERE -->
    <ul ng-repeat="(key1,value1) in value.sname">
        <li>
            <input type="checkbox" value="" ng-checked="value1.checked" ng-model="value1.selected" ng-change="changeCheckAll()" /> 

            <!-- SHOULD CHECK HERE -->
            <ul ng-repeat="(key2,value2) in value1.stname">
                <li>
                    <input type="checkbox" value="" ng-checked="value2.checked" ng-model="value2.selected" ng-change="changeCheckAll()" /> 
                <!-- CHECK HERE -->
            </ul>
        </li>
    </ul>
    </li>
</ul>




var myApp = angular.module('myApp', []);

myApp.controller('myController',myController)

function myController($scope,$filter)
{

    // Array with list checkboxes
    $scope.items = [
    {
        id : 1,
        name : 'BTech CSE',
        sname : [
        {
            id : 11,
            name : 'A Section',
            stname : [
            {
                id : 111,
                name : 'Anand'  
            },
            {
                id : 211,
                name : 'Banand'     

            }]

        },
        {
            id : 21,
            name : 'B Section',
            stname : [
            {
                id : 311,
                name : 'Cnand'  
            },
            {
                id : 411,
                name : 'Danand'     

            }]

        }]  
    },
    {
        id : 2,
        name : 'BTech ECE',
        sname : [
        {
            id : 31,
            name : 'C Section',
            stname : [
            {
                id : 311,
                name : 'Fnand'  
            },
            {
                id : 411,
                name : 'Ganand'     

            }]
        },
        {
            id : 41,
            name : 'D Section',
            stname : [
            {
                id : 311,
                name : 'Rnand'  
            },
            {
                id : 411,
                name : 'Tanand'     

            }]

        }]  

    }];


    $scope.btnVal='Check All'


    $scope.checkAll = function()
    {

        for (var i = 0; i < $scope.items.length; i++)
        {
            $scope.items[i].selected = $scope.allChecked;
        }

        $scope.btnVal='UnCheck All'
    };


    $scope.changeCheckAll = function()
    {
        for (var i = 0; i < $scope.items.length; i++)
        {
            if (!$scope.items[i].selected)
            {
                $scope.allChecked = false;
                $scope.btnVal='Check All'
                return false;
            }
        }

        $scope.btnVal='UnCheck All'

        $scope.allChecked = true;
    }

    $scope.selectedItems = function()
    {
        return $filter('filter')($scope.items,{ selected : true });
    };


}




Aucun commentaire:

Enregistrer un commentaire