Include indeterminate on checkbox with my ng-repeat

Viewed 119

I'll need an indeterminate status on my checkbox but I'm not able to do it by my self (currently learning Angular).

What I want to achieve:

When there is at least one Authorization(Child) checked, the Category(Parent) will be "indeterminate".
When there is at least one Category(Parent) checked, the User(Grandparent) will be "indeterminate".

HTML:

<div class="row band" ng-show="authToolbar.resultList.length !== 0">
    <div class="col-xs-12">
        <div class="row serverItem serverBox" id="{{user.UserId}}" ng-repeat="user in authToolbar.resultList track by user.UserId" title="User">
            <div class="col-xs-12 enfant">
                <div class="col-xs-1">
                    <a type="button"
                       class="btn btn-lg btn-outline flat-btn-primary"
                       data-toggle="collapse"
                       data-target="{{'#user' + user.UserId}}"
                       aria-expanded="false">
                        <i class="fa fa-plus-square-o" aria-hidden="true"></i>
                        <i class="fa fa-minus-square-o" aria-hidden="true"></i>
                    </a>
                </div>
                <div class="col-xs-5">
                    <i class="fa fa-user"></i>&nbsp;&nbsp;&nbsp;&nbsp;<span ng-bind-html="user.Name"></span>
                </div>
                <div class="col-xs-5">
                    <md-checkbox class="md-primary" aria-label="Disabled" name="user" ng-model="user.Enabled" ng-change="ckMasterChange(user)"></md-checkbox>
                </div>
            </div>
            <div id="{{'user' + user.UserId}}" class="row collapse">
                <div class="row" ng-repeat="category in user.AuthorizationCategory track by $index" title="Category">
                    <div class="col-xs-12 enfant">
                        <div class="col-xs-1">
                            <a type="button"
                               class="btn btn-lg btn-outline flat-btn-primary"
                               data-toggle="collapse"
                               data-target="{{'#user' + user.UserId + '-category' + category.Name}}"
                               aria-expanded="false">
                                <i class="fa fa-plus-square-o" aria-hidden="true"></i>
                                <i class="fa fa-minus-square-o" aria-hidden="true"></i>
                            </a>
                        </div>
                        <div class="col-xs-5">
                            <i class="fa fa-cubes"></i>&nbsp;&nbsp;<span ng-bind-html="category.Name"></span>
                        </div>
                        <div class="col-xs-5">
                            <md-checkbox class="md-primary" aria-label="Disabled" name="category" ng-model="category.Enabled" ng-change="ckChange(category); categoryChanged(user, category);" /></md-checkbox>
                        </div>
                    </div>
                    <div id="{{'user' + user.UserId + '-category' + category.Name}}" class="row collapse">
                        <div class="row" ng-repeat="authorization in category.Authorizations track by $index" title="Authorization">
                            <div class="col-xs-12 enfant">
                                <div class="col-xs-1">
                                </div>
                                <div class="col-xs-5">
                                    <i class="fa fa-cube"></i>&nbsp;&nbsp;&nbsp;<span ng-bind-html="authorization.Name"></span>
                                </div>
                                <div class="col-xs-5">
                                    <md-checkbox class="md-primary" aria-label="Disabled" name="authorization" ng-model="authorization.Enabled" ng-change="authorizationChanged(category, authorization)" /></md-checkbox>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

JS(Controller):

(function () {
    "use strict";
    /*global angular,$*/

    var authorizationsController = function ($scope, AuthToolbar, authorizationsService) {
        var parentScope = $scope.$parent;

        $scope.ckChange = function (category) {
            angular.forEach(category.Authorizations, function (childAuthorization) {
                childAuthorization.Enabled = category.Enabled;
            });
        };

        $scope.ckMasterChange = function (user) {
            angular.forEach(user.AuthorizationCategory, function (childCategory) {
                childCategory.Enabled = user.Enabled;

                angular.forEach(childCategory.Authorizations, function (childAuthorization) {
                    childAuthorization.Enabled = user.Enabled;
                });
            });
        };

        $scope.authorizationChanged = function (category, authorization) {
            var allIdentical = true;

            angular.forEach(category.Authorizations, function (childAuthorization) {
                if (childAuthorization.Enabled !== authorization.Enabled) {
                    allIdentical = false;
                }
            });

            if (allIdentical) {
                category.Enabled = authorization.Enabled;
            }
            else {
                category.Enabled = false;
            }
        };

        $scope.categoryChanged = function (user, category) {
            var allIdentical = true;

            angular.forEach(user.AuthorizationCategory, function (childCategory) {
                if (childCategory.Enabled !== category.Enabled) {
                    allIdentical = false;
                }
            });

            if (allIdentical) {
                user.Enabled = category.Enabled;
            }
            else {
                user.Enabled = false;
            }
        };

        function loadUsers() {
            parentScope.tabAuthLoading = true;
            $scope.tabAuthLoaded = false;
            $scope.authLoaded = false;

            authorizationsService.list()
                .then(
                    function (data) {
                        //console.log(data);
                        if ($scope.authToolbar) {
                            $scope.authToolbar.resetFilter();
                            $scope.authToolbar.setSourceList(data);
                        }
                        else {

                            $scope.authToolbar = new AuthToolbar(data);
                        }

                        $scope.authToolbar.buildList();
                        $scope.authLoaded = true;
                    },
                    function () {
                        $scope.authLoaded = false;
                    }
                )
                .finally(function () {
                    parentScope.tabAuthLoading = false;
                    $scope.tabAuthLoaded = true;
                });
        };

        function initController() {
            loadUsers();
        }

        initController();
    };

    authorizationsController.$inject = [
        '$scope',
        'AuthToolbar',
        'authorizationsService'
    ];

    angular.module('PortalApp')
        .controller('AuthorizationsController', authorizationsController);
}());

Thanks a lot for your time !

0 Answers
Related