javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 15:07:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

started checkbox

Browse Source
This commit is contained in:
Adam Bradley
2013-10-11 16:41:43 -05:00
parent 5f34979f4b
commit 17ae340b13
10 changed files with 221 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
js/ext/angular/src/directive/ionicCheckbox.js vendored Normal file
View File

@ -0,0 +1,40 @@
angular.module('ionic.ui.checkbox', [])
.directive('checkbox', function() {
return {
restrict: 'E',
replace: true,
require: '?ngModel',
scope: true,
template: '<div class="checkbox"><input type="checkbox"><div class="handle"></div></div>',
link: function($scope, $element, $attr, ngModel) {
var checkbox, handle;
if(!ngModel) { return; }
checkbox = $element.children().eq(0);
handle = $element.children().eq(1);
if(!checkbox.length || !handle.length) { return; }
$scope.checkbox = new ionic.views.Checkbox({
el: $element[0],
checkbox: checkbox[0],
handle: handle[0]
});
$element.bind('click', function(e) {
$scope.checkbox.tap(e);
$scope.$apply(function() {
ngModel.$setViewValue(checkbox[0].checked);
});
});
ngModel.$render = function() {
$scope.checkbox.val(ngModel.$viewValue);
};
}
}
})

1
js/ext/angular/src/ionicAngular.js vendored
View File

@ -7,6 +7,7 @@ angular.module('ionic.ui', ['ionic.ui.content',
'ionic.ui.nav',
'ionic.ui.sideMenu',
'ionic.ui.list',
'ionic.ui.checkbox',
'ionic.ui.toggle'
]);

45
js/ext/angular/test/checkbox.html Normal file
View File

@ -0,0 +1,45 @@
<html ng-app="navTest">
<head>
<meta charset="utf-8">
<title>Checkbox</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="../../../../dist/css/ionic.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-touch.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-animate.js"></script>
</head>
<body>
<content has-header="true" ng-controller="TestCtrl" class="reveal-animation">
<p><checkbox ng-model="data.isLovely"></checkbox></p>
<button type="submit" class="button button-danger" ng-click="setToTrue()">Set to true</button>
<button type="submit" class="button button-danger" ng-click="setToFalse()">Set to false</button>
<button type="submit" class="button button-danger" ng-click="getValue()">Get Value</button>
</content>
<script src="../../../../dist/js/ionic.js"></script>
<script src="../../../../dist/js/ionic-angular.js"></script>
<script>
angular.module('navTest', ['ionic.ui.checkbox', 'ionic.ui.content', 'ngAnimate', 'ngTouch'])
.controller('TestCtrl', function($scope) {
$scope.data = {};
$scope.getValue = function() {
console.log('Get Value', $scope.data);
}
$scope.setToTrue = function() {
$scope.data.isLovely = true;
return false;
}
$scope.setToFalse = function() {
$scope.data.isLovely = false;
return false;
}
});
</script>
</body>
</html>

25
js/views/checkboxView.js Normal file
View File

@ -0,0 +1,25 @@
(function(ionic) {
ionic.views.Checkbox = function(opts) {
this.el = opts.el;
this.checkbox = opts.checkbox;
this.handle = opts.handle;
};
ionic.views.Checkbox.prototype = {
tap: function(e) {
this.val( !this.checkbox.checked );
},
val: function(value) {
if(value === true || value === false) {
this.checkbox.checked = value;
}
return this.checkbox.checked;
}
};
})(ionic);