AngularJS Input Type Checkbox

The AngularJS input types are HTML input element control and used togather with ng-model directive. AngularJS input type Checkbox can be decorate with various AngularJS arguments like name, ng-true-value, ng-false-value and ng-change.

Syntax

<input type="checkbox"
       ng-model="string"
       [name="string"]
       [ng-true-value="expression"]
       [ng-false-value="expression"]
       [ng-change="string"]>

AngularJS Input Type Checkbox Arguments

Here is a list of AngularJS Input Type Checkbox Arguments.

Directives	Description
ng-model	AngularJS expression to bind the data.
name (optional)	Name of the control input control.
ng-true-value (optional)	The value to which the expression should be set when selected.
ng-false-value (optional)	The value to which the expression should be set when not selected.
ng-change (optional)	AngularJS expression to be executed when input value changes.

AngularJS Input Type Checkbox Example

<!DOCTYPE html>
<html>  
<head> <!-- www.techstrikers.com --> 
<title>AngularJS Imnput Type Checkbox Example</title>  
<Script SRC="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js">
</script>
  <script>
    var app = angular.module('yourApp', [])
    app.controller('InputTypeCheckBoxController', ['$scope', function($scope) {
      $scope.checkboxModel = {
       value1 : true,
       value2 : 'YES'
     };
    }]);
  </script>
</head>  
<body style="background-color:#DDE4E9;">
<fieldset style="background-color:#DDE4E9;">
    <legend>AngulerJS Input Type Checkbox Example</legend>
  <div ng-app="yourApp">
<form name="myForm" ng-controller="InputTypeCheckBoxController">
  <label>Value1:
    <input type="checkbox" ng-model="checkboxModel.value1" ng-true-value="'YES'" ng-false-value="'NO'">
  </label><br/>
  <label>Value2:
    <input type="checkbox" ng-model="checkboxModel.value2" ng-true-value="'YES'" ng-false-value="'NO'">
   </label><br/>
  <tt>value1 = {{checkboxModel.value1}}</tt><br/>
  <tt>value2 = {{checkboxModel.value2}}</tt><br/>
 </form>
 </div>
   </fieldset>
</body>  
</html>

Above example will produce following output