mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
106 lines
2.9 KiB
JavaScript
106 lines
2.9 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>
|
|
* ```
|
|
*/
|
|
/**
|
|
* @ngdoc demo
|
|
* @name ionCheckbox#simple
|
|
* @module checkboxSimple
|
|
* @javascript
|
|
* var app = angular.module('checkboxSimple', ['ionic']);
|
|
* app.controller('CheckboxSimpleCtrl', function($scope) {
|
|
* $scope.pizza = {
|
|
* pepperoni: true,
|
|
* sausage: false,
|
|
* anchovies: true,
|
|
* jalapenos: false
|
|
* };
|
|
*
|
|
* $scope.toppings = function() {
|
|
* var toppings = Object.keys($scope.pizza).filter(function(flavor) {
|
|
* return $scope.pizza[flavor];
|
|
* });
|
|
* if (toppings.length > 1) {
|
|
* toppings[toppings.length - 1] = 'and ' + toppings[toppings.length - 1];
|
|
* }
|
|
* if (toppings.length > 2) {
|
|
* return toppings.join(', ');
|
|
* } else if (toppings.length) {
|
|
* return toppings.join(' ');
|
|
* } else {
|
|
* return 'nothing';
|
|
* }
|
|
* };
|
|
* });
|
|
*
|
|
* @html
|
|
* <ion-header-bar class="bar-positive">
|
|
* <h1 class="title">
|
|
* Checkbox: Simple Usage
|
|
* </h1>
|
|
* </ion-header-bar>
|
|
* <ion-content ng-controller="CheckboxSimpleCtrl" class="padding">
|
|
* <h3>Your pizza has {{toppings()}}!</h3>
|
|
* <ion-checkbox ng-model="pizza.pepperoni">
|
|
* Pepperoni?
|
|
* </ion-checkbox>
|
|
* <ion-checkbox ng-model="pizza.sausage">
|
|
* Sausage?
|
|
* </ion-checkbox>
|
|
* <ion-checkbox ng-model="pizza.anchovies">
|
|
* Jalapeno?
|
|
* </ion-checkbox>
|
|
* <ion-checkbox ng-model="pizza.jalapenos">
|
|
* Anchovies?
|
|
* </ion-checkbox>
|
|
* </ion-content>
|
|
*/
|
|
|
|
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);
|
|
}
|
|
});
|
|
}
|
|
|
|
};
|
|
});
|