A common element of all user interfaces is a checkbox.A checkbox allows end users to select or deselect some given option.Checkbox checked and unchecked states corresponds to true and false values.When checkbox is selected it represents a true value while deselected checkbox represents a false value.
AngularJS ng-checked directive is used to set the state of checkbox or radiobutton to true or false.You can bind ng-checked to functions return value.
In the following example we are declaring an object and adding to the $scope object.We are binding the checkbox to the objects boolean property using the ng-checked attribute.When the user selects the checkbox we are calling a method which is used to display the message to the end user.We are displaying the message using ng-click directive.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
</head>
<body ng-app="SampleModule">
<script>
angular.module('SampleModule', [])
.controller('SampleController', ['$scope', function($scope) {
$scope.Employee = {
name : "ajay",
permanent : true
};
$scope.ChangeEmployment=function()
{
$scope.message="Employment status changed!"
}
}]);
</script>
<form ng-controller="SampleController">
<input type="text" ng-model="Employee.name">
<input type="checkbox" ng-checked="Employee.permanent" ng-click="ChangeEmployment()">
{{message}}
</form>
</body>
</html>
Leave a Reply