JSFiddle - React, Tailwind, and code Playground

by crysfel

HTML

<div ng-app="MyApp">

    
<table ng-controller="ArticlesController">
    <thead>
        <tr>
            <th>
                <input toggle-checkbox toggle-checkbox-list="articles" toggle-checkbox-property="selected" type="checkbox" />
            </th>
            <th>Title</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="article in articles">
            <td><input type="checkbox" ng-model="article.selected"/></td>
            <td>{{article.title}}</td>
        </tr>
    </tbody>
</table>
    
</div>

JavaScript

var MyApp = angular.module('MyApp',[]);

//The directive
MyApp.directive("toggleCheckbox", function() {
    return {
        restrict : "A",
        require: '?ngModel',
        link : function(scope, element, attrs, modelCtrl) {
            var list = scope.$eval(attrs.toggleCheckboxList),
                property = attrs.toggleCheckboxProperty;

            element.bind('change', function() {
                scope.$apply(function () {
                    var isChecked = element.prop('checked');
                    
                    // Set each child's selected property to the checkbox's checked property
                    angular.forEach(list, function(child) {
                        child[property] = isChecked;
                    });
                });
            });
        }
    };
});

//The controller
MyApp.controller('ArticlesController', [
    '$scope',

    function($scope) {
        $scope.articles = [
            {id:1,title:'How to create a directive'},
            {id:2,title:'What is a Controller?'},
            {id:3,title:'JavaScript closures'},
            {id:4,title:'How to Geek'},
            {id:5,title:'Writing your first app'},
            {id:6,title:'Introduction to AngularJS'}
        ];
        
        
    }
]);