Example | Value | Code | |||
---|---|---|---|---|---|
Minimal example |
|
|
<checkbox ng-model="checkboxModel[0]" ></checkbox> |
||
Example with custom name attribute |
|
|
<checkbox ng-model="checkboxModel[1]" name="custom-name" ></checkbox> |
||
Example with custom true value |
|
|
<checkbox ng-model="checkboxModel[2]" ng-true-value="The Truth" ></checkbox> |
||
Example with custom false value |
|
|
<checkbox ng-model="checkboxModel[3]" ng-false-value="The Untruth" ></checkbox> |
||
Example with custom true and false value |
|
|
<checkbox ng-model="checkboxModel[4]" ng-true-value="The Truth" ng-false-value="The Untruth" ></checkbox> |
||
Example with change listener when clicked |
|
Clicks: |
|
<checkbox ng-model="checkboxModel[5]" ng-change="onChange()" ></checkbox> |
|
Example disabled checkbox |
|
|
<checkbox ng-model="checkboxModel[6]" ng-disabled="isDisabled === true" ></checkbox> |
||
Different Sizes (normal, large, larger, largest) |
|
<checkbox ng-model="checkboxModel[7]" ></checkbox> <checkbox large ng-model="checkboxModel[7]" ></checkbox> <checkbox larger ng-model="checkboxModel[7]" ></checkbox> <checkbox largest ng-model="checkboxModel[7]" ></checkbox> |
|||
Different Styles (normal, primary, success, info, warning, danger) |
default: primary: success: info: warning: danger: |
|
<checkbox ng-model="checkboxModel[9]" ></checkbox> <checkbox class="btn-primary" ng-model="checkboxModel[9]" ></checkbox> <checkbox class="btn-success" ng-model="checkboxModel[9]" ></checkbox> <checkbox class="btn-info" ng-model="checkboxModel[9]" ></checkbox> <checkbox class="btn-warning" ng-model="checkboxModel[9]" ></checkbox> <checkbox class="btn-danger" ng-model="checkboxModel[9]" ></checkbox> |
||
Using ng-class (also for checked & unchecked) |
always: checked: unchecked: both: |
|
<checkbox ng-class="{'btn-primary': true}" ng-model="checkboxModel[11]" ></checkbox> <checkbox ng-class="{'btn-success': checked === true}" ng-model="checkboxModel[11]" ></checkbox> <checkbox ng-class="{'btn-warning': checked === false}" ng-model="checkboxModel[11]" ></checkbox> <checkbox ng-class="{ 'btn-success': checked === true, 'btn-warning': checked === false }" ng-model="checkboxModel[11]" ></checkbox> |
||
app.js:
angular.module("angular-bootstrap-checkbox-test", ["ui.checkbox"]) .controller("index", function($scope) { $scope.checkboxModel = [ false, false, false,false, false, false, false, false, true, false, true ]; $scope.changes = 0; $scope.onChange = function() { $scope.changes++; }; $scope.isDisabled = false; }); |