8 Example(s) of Ng-Checked


Description :

In this example of Ng-Checked, We have two checkboxes with same ng-model variable so if we check the checkbox then the other value will be checked and the vice versa. See the code


Ng-Checked Example - 1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="">
    <div class="container">
        <label>Check both: <input type="checkbox" ng-model="master"></label><br />
        <input type="checkbox" ng-checked="master">
    </div>
</body>
</html>

Output

Description :

In this example of Ng-Checked, We will have a grid with checkbox and we will delete the records for which the checkboxes are checked and also provided a checkbox that will check all the checkboxes and clicking on delete will delete the records. See the working example


Ng-Checked Example - 2
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="checkedExample">
    <div ng-controller="ExampleController">
        <div class="container">
            <label>Delete All: <input type="checkbox" ng-model="master"></label><input type="button" class="btn btn-danger btn-xs" ng-click="delete(master)" value="Delete" /><br />
            <table class="table table-hover">
                <thead><tr><th>Id</th><th>First Name</th><th>Last Name</th><th>Action</th></tr></thead>
                <tbody><tr ng-repeat="p in names | orderBy:'fName'"><td>{{p.id}}</td><td>{{p.fName}}</td><td>{{p.lName}}</td><td><input type="checkbox" ng-checked="master" ng-model="isTrue" ng-change="getIndex(p.id,isTrue )" /></td></tr></tbody>
            </table>
        </div>
    </div>
    <script>
    var app = angular.module("checkedExample", []);
    app.controller('ExampleController', ['$scope', function ($scope) {
        var arr = [];
        $scope.names = [{ id: '1', fName: 'John', lName: 'NA' }, { id: '2', fName: 'Smith', lName: 'NA' }, { id: '3', fName: 'Allen', lName: 'NA' }, { id: '4', fName: 'Marry', lName: 'NA' }, { id: '5', fName: 'Jennifer', lName: 'NA' }];
        $scope.getIndex = function (id, isTrue) {
            if (isTrue) 
                arr.push(id);
            
            else {
                var index = arr.indexOf(id);
                arr.splice(index, 1);
            }
        };
        $scope.delete = function (isMaster) {
            if (isMaster) {
                $scope.names = [];
            }
            else {

                for (var i = 0; i < arr.length; i++) {
                    var rec = $scope.names.filter(function (p) { return p.id == arr[i] });
                    var idx = $scope.names.indexOf(rec[0]);
                    $scope.names.splice(idx, 1);
                }
            };
            arr = [];

        };
    }]);
</script>
</body>
</html>

Output

Description :

In this example of Ng-Checked, We have multiple checkboxes and their model names are different and Clicking on the checkboxes will show the output in json format. See the working example


Ng-Checked Example - 3
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="checkedExample">
    <div ng-controller="ExampleController">
        <div class="container">
            <input type="checkbox" ng-checked="testModel.child_1 && testModel.child_2 && testModel.child_3 && testModel.child_4 && testModel.child_5" ng-model="isChecked" /> <b>Select All</b><br />
            <input type="checkbox" ng-model="testModel.child_1" ng-checked="isChecked" /> First<br />
            <input type="checkbox" ng-model="testModel.child_2" ng-checked="isChecked" /> Second<br />
            <input type="checkbox" ng-model="testModel.child_3" ng-checked="isChecked" /> Three<br />
            <input type="checkbox" ng-model="testModel.child_4" ng-checked="isChecked" /> Four<br />
            <input type="checkbox" ng-model="testModel.child_5" ng-checked="isChecked" /> Five<br />
            <br /> <b>isAllSelected = {{isChecked}}</b>
            <pre>{{testModel|json}}</pre>
            <hr />
        </div>
    </div>
    <script>
    var app = angular.module("checkedExample", []);
    app.controller('ExampleController', ['$scope', function ($scope) {

    }]);
</script>
</body>
</html>

Output

Description :

Another example of Ng-Checked


Ng-Checked Example - 4
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="checkedExample">
    <div ng-controller="ExampleController">
        <div class="container">
            Click to select or deselect All: <input type="checkbox" ng-model="master"> <br />
            <br />Check1:
            <input type="checkbox" ng-checked="master" ng-model="Check1">
            <br />Check2:
            <input type="checkbox" ng-checked="master" ng-model="Check2">
            <br />Check3:
            <input type="checkbox" ng-checked="master" ng-model="Check3">
            <hr />
            <br /> <b>master = {{master}}</b>
            <br /> <b>Check1 = {{Check1}}</b>
            <br /> <b>Check2 = {{Check2}}</b>
            <br /> <b>Check3 = {{Check3}}</b>
        </div>
    </div>
    <script>
    var app = angular.module("checkedExample", []);
    app.controller('ExampleController', ['$scope', function ($scope) {

    }]);
</script>
</body>
</html>

Output

Description :

Example of Ng-Checked:


Ng-Checked Example - 5
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="checkedExample">
    <div ng-controller="ExampleController">
        <div class="container">
            <div ng-repeat="item in items">
                <b>{{item}}</b> <span ng-if="isExists(item)" style="color:lightgreen">selected</span>
            </div>
            <hr />
            <div ng-repeat="item in items">
                <input type="checkbox" ng-checked="isExists(item)" ng-click="toggle(item)" />
                {{item}}
            </div>
            <input type="checkbox" ng-checked="selected.length >= 2" ng-disabled="true">Two or more items selected
            <span>Selected: {{ selected }}</span>
        </div>
    </div>
    <script>
    var app = angular.module("checkedExample", []);
    app.controller('ExampleController', ['$scope', function ($scope) {
        $scope.items = ["AngularJs", "Bootstrap", "JQuery", "LearnIt", "javaScript"];
        $scope.selected = [];
        $scope.toggle = function (item) {
            var idx = $scope.selected.indexOf(item);
            if (idx > -1)
                $scope.selected.splice(idx, 1);
            else
                $scope.selected.push(item);
        };
        $scope.isExists = function (item) {
            return $scope.selected.indexOf(item) > -1;
        };
    }]);
</script>
</body>
</html>

Output

Description :

Example of Ng-Checked:


Ng-Checked Example - 6
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="checkedExample">
    <div ng-controller="ExampleController">
        <div class="container">
            <h2>What are your favorite sports?</h2>
            <div ng-repeat="sport in sports">
                <label>{{sport.label}}</label>
                <input type="checkbox" ng-model="sport.selected" ng-true-value="'YES'" ng-false-value="'NO'">
                <label>
                    ng-checked: <input type="checkbox" ng-checked="sport.selected === 'YES'">
                </label>
                <div>
                    Current state: {{sport.selected}}
                </div>
            </div>
        </div>
    </div>
    <script>
    var app = angular.module("checkedExample", []);
    app.controller('ExampleController', ['$scope', function ($scope) {
        $scope.sports = [{ label: 'Basketball', selected: 'NO' }, { label: 'Cricket', selected: 'YES' }, { label: 'Tennis', selected: 'NO' }, { label: 'Badminton', selected: 'YES' }
        ];
    }]);
</script>
</body>
</html>

Output

Description :

Another example of Ng-Checked:


Ng-Checked Example - 7
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
    .divStyle {
        height: 60px;
        width: 60px;
        float: left;
        margin: 5px;
    }
    span {
        color: white;
    }
</style>
</head>
<body ng-app="checkedExample">
    <div ng-controller="ExampleController">
        <div class="container">
            <div class="row">
                <label>Delete All  <input type="checkbox" ng-model="master" /></label>
                <div ng-repeat="div in noOfDivs">
                    <div class="divStyle" style="background-color: maroon;" ng-click="toggle(div);div.checked=!div.checked">
                        <input type="checkbox" ng-checked="master" ng-click="div.checked=!div.checked" ng-model="div.checked" />
                        <span>IMG-{{div.name-1000}}</span>
                    </div>
                </div>
            </div>
            <div class="row">
                <input type="button" class="btn btn-danger" ng-click="delete()" value="Delete" />
            </div>
        </div>
    </div>
    <script>
    var app = angular.module("checkedExample", []);
    app.controller('ExampleController', ['$scope', function ($scope) {
        $scope.noOfDivs = [];
        for (var i = 1000; i <= 1025; i++) {
            $scope.noOfDivs.push({ name: i });
        };
        $scope.selectedDiv = [];
        $scope.toggle = function (id) {
            var index = $scope.selectedDiv.indexOf(id);
            if (index > -1)
                $scope.selectedDiv.splice(index, 1);
            else
                $scope.selectedDiv.push(id);
        };
        $scope.delete = function () {
            if ($scope.master)
                $scope.noOfDivs = [];
            else {
                for (var i = 0; i < $scope.selectedDiv.length; i++) {
                    var idx = $scope.noOfDivs.indexOf($scope.selectedDiv[i]);
                    $scope.noOfDivs.splice(idx, 1);
                };
                $scope.selectedDiv = [];
            };
        };
    }]);
</script>
</body>
</html>

Output

Description :

Ng-checked is basically used to set the selection of check boxes and radio buttons etc, Here in our example we are taking 1 check box and 2 radio buttons where radio buttons are dependent on check box selection means one radio button will be selected if check box is checked and other one is selected if check box is unchecked. Lets take an example of party :) :


Ng-Checked Example - 8
<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>Learn It HTML Template</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="sampleApp">
    <div ng-controller="sampleController">
       Are you going for party tonight: <input type="checkbox" ng-model="checked">  
  <br/> <br/>
You should go, Complete this example and rest examples you can learn tomorrow :), So click on the check box above: 
<br/> <br/>
<input id="checkSlave" type="radio" ng-checked="checked">Yeah :)
<input id="checkSlave" type="radio" ng-checked="!checked"> Sad :(
    </div>
    <script>
    var app = angular.module("sampleApp", []);
    app.controller('sampleController', ['$scope', function ($scope) {
       
    }]);
</script>
</body>
</html>

Output