JSFiddle - React, Tailwind, and code Playground

by Sinh Nguyen

HTML

<div ng-controller="ChckbxsCtrl">
    <table>
                                        <li ng-repeat="item in itemDisplayed" class="ng-scope has-pretty-child"> 
                                            <div>
                                                <ul>
                                                    <input type="checkbox" class="checkall" ng-model="item.name_selected" ng-click="toggleAll(item)"><span>{{item.name}}</span>
                                                    <div>
                                                        <li ng-repeat="sub in item.subs" class="ng-scope has-pretty-child">
                                                            <input type="checkbox" kv-pretty-check=""  ng-model="sub.selected" ng-change="optionToggled(item,item.subs)"><span>{{sub.sub}}</span>
                                                        </li>
                                                    </div>
                                                </ul>
                                            </div>
                                        </li>
                                    </table>
</div>

JavaScript

function ChckbxsCtrl( $scope , $filter ){
    $scope.chkbxs = [{label:"Led Zeppelin", val:false },{label:"Electric Light Orchestra", val:false },{label:"Mark Almond", val:false }];
     var newArr = [];
     var list1 = {name: "Role A",name_selected:false ,subs: [{sub: "Read",id:1,selected:false},{sub: "Write",id:2,selected:false},{sub: "Update",id:3,selected:false}], };
     var list2 = {name: "Role B",name_selected:false ,subs: [{sub: "Read",id:1,selected:false},{sub: "Write",id:2,selected:false}], };
       var list3 = {name: "Role B",name_selected:false ,subs: [{sub: "Read",id:1,selected:false},{sub: "Update",id:3,selected:false}], };
     newArr.push(list1);
     newArr.push(list2);
     newArr.push(list3);
    
		$scope.itemDisplayed = newArr;
    
   
        $scope.toggleAll = function (item) {
            var toogleStatus = !item.name_selected;
            console.log(toogleStatus);
            angular.forEach(item, function () {
                angular.forEach(item.subs, function (sub) {
                    sub.selected = toogleStatus;
                });
            });
        };
        
        $scope.optionToggled = function(item,subs){
            item.name_selected = subs.every(function(itm){ return itm.selected; })
        }
  
}