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
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
|
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...
|
Blogger Comment
Facebook Comment