JSFiddle - React, Tailwind, and code Playground

by awolf2904

HTML

<div ng-app="demoApp" ng-controller="mainController">
    <h3>
    Directive
    </h3>
    <input type="checkbox" ng-model="checkAll" ng-change="selectAll()" />check all
    <div ng-repeat="user in users">
        <label class="i-checks">
            <input type="checkbox" checklist-model="selection.selectedUsers" class="userChecker" data-checklist-value="user"> {{user.name}}
        </label>
    </div>
    <pre>
        selectedUsers:
        {{selection.selectedUsers | json : 2}}
        user model:
        {{users | json: 2}}
    </pre>
</div>

JavaScript

angular.module('demoApp', [])
    .controller('mainController', function($scope, $timeout) {

        $scope.users = [{
            id: 0,
            name: 'John'
        }, {
            id: 1,
            name: 'Jane'
        }];
        $scope.selection = {
            selectedUsers: [$scope.users[0]]
        }; //[$scope.users[0]];
        
        $scope.selectAll = function() {
            //console.log($scope.checkAll);
            $scope.selection.selectedUsers = $scope.checkAll ?
                angular.copy($scope.users) : [];
        }
    })
    .directive('checklistModel', ['$parse', '$compile', function($parse, $compile) {
        // contains
        function contains(arr, item, comparator) {
            if (angular.isArray(arr)) {
                for (var i = arr.length; i--;) {
                    if (comparator(arr[i], item)) {
                        return true;
                    }
                }
            }
            return false;
        }

        // add
        function add(arr, item, comparator) {
            arr = angular.isArray(arr) ? arr : [];
            if (!contains(arr, item, comparator)) {
                arr.push(item);
            }
            return arr;
        }

        // remove
        function remove(arr, item, comparator) {
            if (angular.isArray(arr)) {
                for (var i = arr.length; i--;) {
                    if (comparator(arr[i], item)) {
                        arr.splice(i, 1);
                        break;
                    }
                }
            }
            return arr;
        }

        // http://stackoverflow.com/a/19228302/1458162
        function postLinkFn(scope, elem, attrs) {
            // compile with `ng-model` pointing to `checked`
            $compile(elem)(scope);

            // getter / setter for original model
            var getter = $parse(attrs.checklistModel);
            var setter = getter.assign;
            var checklistChange =...