angularjs checkbox checked unchecked

Angularjs check-box checked and unchecked

Hello everyone, I am going to share the code-sample for check-box checked and unchecked in using ng-checkbox and ng-model as given below.


The angularjs code-sample

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

        app.controller('ngCheckCtrl', function ($scope) {
            $scope.name = 'World';
            $scope.items = {
                Value1: true,
                Value2: false,
                Value3: false
            };

            $scope.display = function () {
                console.log($scope.items);
            };
        });

The HTML code-sample
<div  ng-app="ngCheckApp">
    <div ng-controller="ngCheckCtrl">
        <h1>ng-checked for checkboxes</h1>
        <label>
         <input type="checkbox" name="item1" ng-model="items.Value1" /> CheckBox 1
        </label>
        <label>
         <input type="checkbox" name="item2" ng-model="items.Value2" /> CheckBox 2
        </label>
        <label>
         <input type="checkbox" name="item3" ng-model="items.Value3" /> CheckBox 3
        </label>
        <input type="button" value="Submit" ng-click="display()" />
        <pre>{{items | json}}</pre>
    </div>
</div>

The Full live demo code (HTML+AngularJs)

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>AngularJS checkbox checked and unchecked </title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>
    <script>
        var app = angular.module('ngCheckApp', []);

        app.controller('ngCheckCtrl', function ($scope) {
            $scope.name = 'World';
            $scope.items = {
                Value1: true,
                Value2: false,
                Value3: false
            };

            $scope.display = function () {
                console.log($scope.items);
            };
        });
    </script>
</head>
<body ng-app="ngCheckApp">
    <div ng-controller="ngCheckCtrl">
        <h1>ng-checked for checkboxes</h1>
        <label>
            <input type="checkbox" name="item1" ng-model="items.Value1" /> CheckBox 1
        </label>
        <label>
            <input type="checkbox" name="item2" ng-model="items.Value2" /> CheckBox 2
        </label>
        <label>
            <input type="checkbox" name="item3" ng-model="items.Value3" /> CheckBox 3
        </label>
        <input type="button" value="Submit" ng-click="display()" />
        <pre>{{items | json}}</pre>
    </div>
</body>
</html>



Thank you!
ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.