Files
ionic-framework/js/angular/directive/checkbox.js
2014-05-27 11:21:08 -06:00

53 lines
1.4 KiB
JavaScript

/**
* @ngdoc directive
* @name ionCheckbox
* @module ionic
* @restrict E
* @codepen hqcju
* @description
* The checkbox is no different than the HTML checkbox input, except it's styled differently.
*
* The checkbox behaves like any [AngularJS checkbox](http://docs.angularjs.org/api/ng/input/input[checkbox]).
*
* @usage
* ```html
* <ion-checkbox ng-model="isChecked">Checkbox Label</ion-checkbox>
* ```
*/
IonicModule
.directive('ionCheckbox', function() {
return {
restrict: 'E',
replace: true,
require: '?ngModel',
transclude: true,
template: '<label class="item item-checkbox">' +
'<div class="checkbox checkbox-input-hidden disable-pointer-events">' +
'<input type="checkbox">' +
'<i class="checkbox-icon"></i>' +
'</div>' +
'<div class="item-content disable-pointer-events" ng-transclude></div>' +
'</label>',
compile: function(element, attr) {
var input = element.find('input');
forEach({
'name': attr.name,
'ng-value': attr.ngValue,
'ng-model': attr.ngModel,
'ng-checked': attr.ngChecked,
'ng-disabled': attr.ngDisabled,
'ng-true-value': attr.ngTrueValue,
'ng-false-value': attr.ngFalseValue,
'ng-change': attr.ngChange
}, function(value, name) {
if (isDefined(value)) {
input.attr(name, value);
}
});
}
};
});