How to bind the check-boxes in AngularJs?

The check-boxes is a form controls used to handle the multiples selection process in a form.

In the below example, I have a JSON object which repeating with ng-repeat and the keys are strings and the values are an array.

All the details as given example

The AngularJs code-sample

        var app = angular.module('chkbApp', []);
        app.controller('chkbCtrl', function ($scope) {
            $scope.myColors = {
                Red: true,
                Blue: true
            };
        });

The HTML code-sample

<div ng-app="chkbApp">
    <div ng:controller="chkbCtrl">
        <h1>Binding Check-boxes in AngularJs</h1>
        <label ng-repeat="(colour,enabled) in myColors">
            <input type="checkbox" ng-model="myColors[colour]"> {{colour}}
        </label>
        <p>My JSON Result : {{myColors}}</p>
    </div>
</div>


The full Live demo code

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Binding Check-boxes in AngularJs</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js"></script>
    <script>
        var app = angular.module('chkbApp', []);
        app.controller('chkbCtrl', function ($scope) {
            $scope.myColors = {
                Red: true,
                Blue: true
            };
        });
    </script>
</head>
<body ng-app="chkbApp">
    <div ng:controller="chkbCtrl">
        <h1>Binding Check-boxes in AngularJs</h1>
        <label ng-repeat="(colour,enabled) in myColors">
            <input type="checkbox" ng-model="myColors[colour]"> {{colour}}
        </label>
        <p>My JSON Result : {{myColors}}</p>
    </div>
</body>
</html>


The output:

About Blogger

ANIL SINGH

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

    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment

SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book