angular-bootstrap-checkbox
Version:
A checkbox for AngularJS styled to fit the Twitter Bootstrap standard design
457 lines (402 loc) • 12.7 kB
HTML
<html>
<head>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="angular-bootstrap-checkbox.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="angular-bootstrap-checkbox-test" ng-controller="index">
<table class="table" style="width:900px;">
<tr>
<th style="width:200px;">
Example
</th>
<th style="width:20px;"></th>
<th style="width:100px;">
Value
</th>
<th style="width:150px;"></th>
<th>
Code
</th>
<th></th>
</tr>
<tr>
<td>
Minimal example
</td>
<td>
<checkbox id="checkbox0" ng-model="checkboxModel[0]"></checkbox>
</td>
<td>
<span id="checkboxModel0" ng-bind="checkboxModel[0]"></span>
</td>
<td>
<button id="checkboxButton0true" style="width:150px;" ng-click="checkboxModel[0] = true">
Set to true
</button><br>
<button id="checkboxButton0false" style="width:150px;" ng-click="checkboxModel[0] = false">
Set to false
</button>
</td>
<td style="width:300px;">
<pre><checkbox
ng-model="checkboxModel[0]"
></checkbox></pre>
</td>
</tr>
<tr>
<td>
Example with custom name attribute
</td>
<td>
<checkbox id="checkbox1" ng-model="checkboxModel[1]" name="custom-name"></checkbox>
</td>
<td>
<span id="checkboxModel1" ng-bind="checkboxModel[1]"></span>
</td>
<td>
<button id="checkboxButton1true" style="width:150px;" ng-click="checkboxModel[1] = true">
Set to true
</button><br>
<button id="checkboxButton1false" style="width:150px;" ng-click="checkboxModel[1] = false">
Set to false
</button>
</td>
<td style="width:300px;">
<pre><checkbox
ng-model="checkboxModel[1]"
<b>name="custom-name"</b>
></checkbox></pre>
</td>
</tr>
<tr>
<td>
Example with custom true value
</td>
<td>
<checkbox id="checkbox2" ng-model="checkboxModel[2]" ng-true-value="The Truth"></checkbox>
</td>
<td>
<span id="checkboxModel2" ng-bind="checkboxModel[2]"></span>
</td>
<td>
<button id="checkboxButton2true" style="width:150px;" ng-click="checkboxModel[2] = true">
Set to true
</button><br>
<button id="checkboxButton2false" style="width:150px;" ng-click="checkboxModel[2] = false">
Set to false
</button><br>
<button id="checkboxButton2truth" style="width:150px;" ng-click="checkboxModel[2] = 'The Truth'">
Set to "The Truth"
</button>
</td>
<td style="width:300px;">
<pre><checkbox
ng-model="checkboxModel[2]"
<b>ng-true-value="The Truth"</b>
></checkbox></pre>
</td>
</tr>
<tr>
<td>
Example with custom false value
</td>
<td>
<checkbox id="checkbox3" ng-model="checkboxModel[3]" ng-false-value="The Untruth"></checkbox>
</td>
<td>
<span id="checkboxModel3" ng-bind="checkboxModel[3]"></span>
</td>
<td>
<button id="checkboxButton3true" style="width:150px;" ng-click="checkboxModel[3] = true">
Set to true
</button><br>
<button id="checkboxButton3false" style="width:150px;" ng-click="checkboxModel[3] = false">
Set to false
</button><br>
<button id="checkboxButton3untruth" style="width:150px;" ng-click="checkboxModel[3] = 'The Untruth'">
Set to "The Untruth"
</button>
</td>
<td style="width:300px;">
<pre><checkbox
ng-model="checkboxModel[3]"
<b>ng-false-value="The Untruth"</b>
></checkbox></pre>
</td>
</tr>
<tr>
<td>
Example with custom true and false value
</td>
<td>
<checkbox id="checkbox4" ng-model="checkboxModel[4]" ng-true-value="The Truth" ng-false-value="The Untruth"></checkbox>
</td>
<td>
<span id="checkboxModel4" ng-bind="checkboxModel[4]"></span>
</td>
<td>
<button id="checkboxButton4true" style="width:150px;" ng-click="checkboxModel[4] = true">
Set to true
</button><br>
<button id="checkboxButton4false" style="width:150px;" ng-click="checkboxModel[4] = false">
Set to false
</button><br>
<button id="checkboxButton4truth" style="width:150px;" ng-click="checkboxModel[4] = 'The Truth'">
Set to "The Truth"
</button><br>
<button id="checkboxButton4untruth" style="width:150px;" ng-click="checkboxModel[4] = 'The Untruth'">
Set to "The Untruth"
</button>
</td>
<td style="width:300px;">
<pre><checkbox
ng-model="checkboxModel[4]"
<b>ng-true-value="The Truth"</b>
<b>ng-false-value="The Untruth"</b>
></checkbox></pre>
</td>
</tr>
<tr>
<td>
Example with change listener when clicked
</td>
<td>
<checkbox id="checkbox5" ng-model="checkboxModel[5]" ng-change="onChange()"></checkbox>
</td>
<td>
<span id="checkboxModel5" ng-bind="checkboxModel[5]"></span><br>
<br>
Clicks: <span id="changes" ng-bind="changes"></span>
</td>
<td>
<button id="checkboxButton5true" style="width:150px;" ng-click="checkboxModel[5] = true">
Set to true
</button><br>
<button id="checkboxButton5false" style="width:150px;" ng-click="checkboxModel[5] = false">
Set to false
</button>
</td>
<td style="width:300px;">
<pre><checkbox
ng-model="checkboxModel[5]"
<b>ng-change="onChange()"</b>
></checkbox></pre>
</td>
</tr>
<tr>
<td>
Example disabled checkbox
</td>
<td>
<checkbox id="checkbox6" ng-model="checkboxModel[6]" ng-disabled="isDisabled === true"></checkbox>
</td>
<td>
<span id="checkboxModel6" ng-bind="checkboxModel[6]"></span>
</td>
<td>
<button id="checkboxButton6true" style="width:150px;" ng-click="checkboxModel[6] = true">
Set to true
</button><br>
<button id="checkboxButton6false" style="width:150px;" ng-click="checkboxModel[6] = false">
Set to false
</button>
<button id="checkboxButton6enable" style="width:150px;" ng-click="isDisabled = false">
Enable
</button>
<button id="checkboxButton6disable" style="width:150px;" ng-click="isDisabled = true">
Disable
</button>
</td>
<td style="width:300px;">
<pre><checkbox
ng-model="checkboxModel[6]"
<b>ng-disabled="isDisabled === true"</b>
></checkbox></pre>
</td>
</tr>
<tr>
<td>
Example indeterminate state
</td>
<td>
<checkbox id="checkbox7" ng-model="checkboxModel[7]" indeterminate="true"></checkbox>
</td>
<td>
<span id="checkboxModel7" ng-bind="checkboxModel[7]"></span>
</td>
<td>
<button id="checkboxButton7true" style="width:150px;" ng-click="checkboxModel[7] = true">
Set to true
</button><br>
<button id="checkboxButton7false" style="width:150px;" ng-click="checkboxModel[7] = false">
Set to false
</button>
<button id="checkboxButton7undefined" style="width:150px;" ng-click="checkboxModel[7] = undefined">
Set to undefined
</button>
</td>
<td style="width:300px;">
<pre><checkbox
ng-model="checkboxModel[7]"
<b>indeterminate="true"</b>
></checkbox></pre>
</td>
</tr>
<tr>
<td>
Different Sizes (normal, large, larger, largest)
</td>
<td colspan="3">
<checkbox id="checkbox8a" ng-model="checkboxModel[8]"></checkbox>
<checkbox id="checkbox8b" large ng-model="checkboxModel[8]"></checkbox>
<checkbox id="checkbox8c" larger ng-model="checkboxModel[8]"></checkbox>
<checkbox id="checkbox8d" largest ng-model="checkboxModel[8]"></checkbox>
<br><br>
<checkbox id="checkbox9a" ng-model="checkboxModel[9]"></checkbox>
<checkbox id="checkbox9b" large ng-model="checkboxModel[9]"></checkbox>
<checkbox id="checkbox9c" larger ng-model="checkboxModel[9]"></checkbox>
<checkbox id="checkbox9d" largest ng-model="checkboxModel[9]"></checkbox>
</td>
<td style="width:300px;">
<pre><checkbox
ng-model="checkboxModel[8]"
></checkbox>
<checkbox <b>large</b>
ng-model="checkboxModel[8]"
></checkbox>
<checkbox <b>larger</b>
ng-model="checkboxModel[8]"
></checkbox>
<checkbox <b>largest</b>
ng-model="checkboxModel[8]"
></checkbox></pre>
</td>
</tr>
<tr>
<td>
Different Styles (normal, primary, success, info, warning, danger)
</td>
<td></td>
<td>
default:<br><br><br>
primary:<br><br><br>
success:<br><br><br>
info:<br><br><br>
warning:<br><br><br>
danger:
</td>
<td>
<checkbox id="checkbox10a" ng-model="checkboxModel[10]"></checkbox>
<checkbox id="checkbox11a" ng-model="checkboxModel[11]"></checkbox><br><br><br>
<checkbox id="checkbox10b" class="btn-primary" ng-model="checkboxModel[10]"></checkbox>
<checkbox id="checkbox11b" class="btn-primary" ng-model="checkboxModel[11]"></checkbox><br><br><br>
<checkbox id="checkbox10c" class="btn-success" ng-model="checkboxModel[10]"></checkbox>
<checkbox id="checkbox11c" class="btn-success" ng-model="checkboxModel[11]"></checkbox><br><br><br>
<checkbox id="checkbox10d" class="btn-info" ng-model="checkboxModel[10]"></checkbox>
<checkbox id="checkbox11d" class="btn-info" ng-model="checkboxModel[11]"></checkbox><br><br><br>
<checkbox id="checkbox10e" class="btn-warning" ng-model="checkboxModel[10]"></checkbox>
<checkbox id="checkbox11e" class="btn-warning" ng-model="checkboxModel[11]"></checkbox><br><br><br>
<checkbox id="checkbox10f" class="btn-danger" ng-model="checkboxModel[10]"></checkbox>
<checkbox id="checkbox11f" class="btn-danger" ng-model="checkboxModel[11]"></checkbox>
</td>
<td style="width:300px;">
<pre><checkbox
ng-model="checkboxModel[10]"
></checkbox>
<checkbox <b>class="btn-primary"</b>
ng-model="checkboxModel[10]"
></checkbox>
<checkbox <b>class="btn-success"</b>
ng-model="checkboxModel[10]"
></checkbox>
<checkbox <b>class="btn-info"</b>
ng-model="checkboxModel[10]"
></checkbox>
<checkbox <b>class="btn-warning"</b>
ng-model="checkboxModel[10]"
></checkbox>
<checkbox <b>class="btn-danger"</b>
ng-model="checkboxModel[10]"
></checkbox></pre>
</td>
</tr>
<tr>
<td>
Using ng-class (also for checked & unchecked)
</td>
<td></td>
<td>
always:<br><br><br>
checked:<br><br><br>
unchecked:<br><br><br>
both:
</td>
<td>
<checkbox id="checkbox12a" ng-model="checkboxModel[12]" ng-class="{'btn-primary': true}"></checkbox>
<checkbox id="checkbox13a" ng-model="checkboxModel[13]" ng-class="{'btn-primary': true}"></checkbox><br><br><br>
<checkbox id="checkbox12b" ng-model="checkboxModel[12]" ng-class="{'btn-success': checked === true}"></checkbox>
<checkbox id="checkbox13b" ng-model="checkboxModel[13]" ng-class="{'btn-success': checked === true}"></checkbox><br><br><br>
<checkbox id="checkbox12c" ng-model="checkboxModel[12]" ng-class="{'btn-warning': checked === false}"></checkbox>
<checkbox id="checkbox13c" ng-model="checkboxModel[13]" ng-class="{'btn-warning': checked === false}"></checkbox><br><br><br>
<checkbox id="checkbox12d" ng-model="checkboxModel[12]" ng-class="{'btn-success': checked === true, 'btn-warning': checked === false}"></checkbox>
<checkbox id="checkbox13d" ng-model="checkboxModel[13]" ng-class="{'btn-success': checked === true, 'btn-warning': checked === false}"></checkbox>
</td>
<td style="width:300px;">
<pre>
<checkbox
<b>ng-class="{'btn-primary': true}"</b>
ng-model="checkboxModel[12]"
></checkbox>
<checkbox
<b>ng-class="{'btn-success': checked === true}"</b>
ng-model="checkboxModel[12]"
></checkbox>
<checkbox
<b>ng-class="{'btn-warning': checked === false}"</b>
ng-model="checkboxModel[12]"
></checkbox>
<checkbox
<b>ng-class="{
'btn-success': checked === true,
'btn-warning': checked === false
}"</b>
ng-model="checkboxModel[12]"
></checkbox></pre>
</td>
</tr>
<tr>
<td colspan="5">
<b>app.js:</b>
<pre>
angular.module("angular-bootstrap-checkbox-test", ["ui.checkbox"])
.controller("index", function($scope) {
$scope.checkboxModel = [
false, false, false,false, false, false, false, false, false, true, false, true
];
$scope.changes = 0;
$scope.onChange = function() {
$scope.changes++;
};
$scope.isDisabled = false;
});
</pre>
</td>
</tr>
</table>
</body>
</html>