JSFiddle - React, Tailwind, and code Playground

by ajai jothi

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>
<div ng-app="sample" ng-controller="IMCntrl">
    <ul>
        <li ng-repeat="l in list">
            <input type="checkbox" im-checkbox="l.list" ng-model="l.checked" />{{l.name}} {{l.checked}}
            <ul ng-repeat="sl in l.list">
                <li>
                    <input type="checkbox" im-checkbox="" ng-model="sl.checked" />{{sl.name}} {{sl.checked}}</li>
            </ul>
        </li>
    </ul>
</div>

JavaScript

angular.module('sample', [])
    .controller('IMCntrl', function ($scope) {
    $scope.list = [{
        id: 1,
        name: "anand",
        checked: false,
        list: [{
            id: 1,
            name: 'ajai',
            checked:true
        }, {
            id: 2,
            name: 'rakesh',
            checked:true
        }]
    }];
})
    .directive('imCheckbox', function () {
    return {
        restrict: 'A',
        require: '?ngModel',
        scope: {
            list: '=imCheckbox',
            model: '=ngModel'
        },
        link: function (scope, element, attr, modelCtrl) {
            
            element.on('change', function(){
                var int = (scope.model==null);
                var ch = (scope.model==true);
                if(int)
                    scope.model = false;
                else if(ch)
                    scope.model = null;
                else
                    scope.model = true;
                
                console.log(scope.model, int, ch);
                if(scope.list){
                    angular.forEach(scope.list,function(lt){
                        lt.checked = scope.model;
                    });
                }
                
                scope.$apply();
            });
            
            scope.$watch(function(){
                return {
                    checked:scope.model
                }
            }, function(ov,nv){
                console.log(nv);
                element.prop('checked', false);
                element.prop('indeterminate', false);
                if(nv.checked==null)
                    element.prop('indeterminate', true);
                else
                    element.prop('checked', nv.checked); 
                
                modelCtrl.$setViewValue(nv.checked);
            },true);
            
            /*scope.$watch('list', function (nv) {
                var hasChecked = false;
                var hasNonChecked = false;
            ...