python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
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

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions