JSFiddle - React, Tailwind, and code Playground

by Luqman Rom

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/bootstrap.min.css">
<div class="container">
    <div class="navbar navbar-default navbar-inverse" role="navigation">
        <div class="navbar-header"> <a class="navbar-brand" href="http://www.ivivelabs.com">AngularJS Checkbox Array Demo</a>

        </div>
    </div>
    <div ng-app="myApp">
        <div ng-controller="TestCtrl">
            <ol>
                <li>
                    <label>
                        <input type="checkbox" ng-model="checkedAll" ng-change="selectAll($event)" />Check/Uncheck All</label>
                </li>
                <li ng-repeat="row in rows">
                    <label>
                        <input type="checkbox" ng-checked="row.selected" ng-model="row.selected" />{{row.city}}</label>
                </li>
            </ol> 
           
         <pre>
            {{rows | json}}
        </pre>

        </div>
    </div>

JavaScript

var myApp = angular.module("myApp", []);

myApp.controller("TestCtrl", ['$scope', function ($scope) {
    $scope.cities = [];
    $scope.selectAll = function (e) {
        $scope.rows.forEach(function (v) {
            v.selected = $scope.checkedAll;
        });
    };
    $scope.rows = [{
        'city': "Dhaka",
        selected: 1
    }, {
        city: "Chittagong"
    }, {
        city: "Sylhet"
    }, {
        city: "Rajshahi"
    }, {
        city: "Khulna"
    }];
}]);