Improve this Doc  View Source

input[checkbox]

  1. - input in module ng

HTML checkbox.

Directive Info

Usage

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

Arguments

Param Type Details
ngModel string

Assignable angular expression to data-bind to.

name
(optional)
string

Property name of the form under which the control is published.

ngTrueValue
(optional)
expression

The value to which the expression should be set when selected.

ngFalseValue
(optional)
expression

The value to which the expression should be set when not selected.

ngChange
(optional)
string

Angular expression to be executed when input changes due to user interaction with the input element.

Example

  Edit in Plunker
<script>
  angular.module('checkboxExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.checkboxModel = {
       value1 : true,
       value2 : 'YES'
     };
    }]);
</script>
<form name="myForm" ng-controller="ExampleController">
  <label>Value1:
    <input type="checkbox" ng-model="checkboxModel.value1">
  </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>
it('should change state', function() {
  var value1 = element(by.binding('checkboxModel.value1'));
  var value2 = element(by.binding('checkboxModel.value2'));

  expect(value1.getText()).toContain('true');
  expect(value2.getText()).toContain('YES');

  element(by.model('checkboxModel.value1')).click();
  element(by.model('checkboxModel.value2')).click();

  expect(value1.getText()).toContain('false');
  expect(value2.getText()).toContain('NO');
});