triStateCheckbox

Advanced nav service

by long2know

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-loader.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-sanitize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-cookies.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-touch.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-resource.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap-tpls.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui-ieshiv.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
<div ng-controller="myCtrl as vm">
    <table class="table">
        <thead>
            <tr>
                <th class="header-check">
                    <tri-state-checkbox class="toggle-all" items="vm.items" child-click="childClick"></tri-state-checkbox>
                </th>
                <th>Id</th>
                <th>Name</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="i in vm.items track by $index">
                <td class="td-checkbox"><input type="checkbox"...

JavaScript

(function () {
    angular.module('myApp.services', ['ngResource', 'ngAnimate']);
    angular.module('myApp.directives', []);
    angular.module('myApp.controllers', []);

    var myApp = angular.module('myApp', [
        'myApp.services',
        'myApp.controllers',
        'myApp.directives',
        'ngSanitize',
        'ngAnimate',
        'ui.bootstrap',
        'ui']);

    var myController = function ($scope, $timeout, $animate, $log) {               
        var vm = this,
            initItems = function() {
                vm.items = [];
                for (var i = 0; i < 5; i++) {
                    vm.items.push({ id: vm.items.length, name: "Item " + i.toString() });
                }
            },
            init = function() {
                initItems();
            };
        
        vm.addItem = function() {
            vm.items.push({ id: vm.items.length, name: "Item " + vm.items.length.toString() });
            vm.selectionChanged(vm.items[vm.items.length - 1]);
        };
        
        vm.selectionChanged = function (item) {
            $scope.$broadcast("childClick", item);
        };
        
        init();
    };
    
    var triStateCheckbox = function () {
        var directive = {
            replace: true,
            restrict: 'E',
            scope: {
                items: '=',
                topLevelClick: '=',
                childClick: '@childClick'
            },
            template: '<input type="checkbox" ng-model="topLevel" ng-change="topLevelChange()">',
            controller: ['$scope', '$element', function ($scope, $element) {

                $scope.setState = function () {
                    var count = 0;
                    for (i = 0; i < $scope.items.length; i++)
                        count += $scope.items[i].isSelected ? 1 : 0;
                    $element.prop('indeterminate', false);
                    $scope.topLevel = (count === 0) ? false : true;
                    if (count > 0 && count <...