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 live
demo link http://embed.plnkr.co/LJzWUP/preview
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>
The
output go to link http://embed.plnkr.co/LJzWUP/preview
Thank
you!
|
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..
|