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

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
http://www.code-sample.com
http://www.code-sample.xyz

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.