mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
153 lines
4.6 KiB
HTML
Executable File
153 lines
4.6 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html ng-app="ionicApp">
|
|
<head>
|
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
|
<title>Tap Inputs</title>
|
|
|
|
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
|
|
|
|
<link rel="stylesheet" href="../../../../dist/css/ionic.css">
|
|
|
|
<script src="../../../../dist/js/ionic.js"></script>
|
|
<script src="../../../../dist/js/angular/angular.js"></script>
|
|
<script src="../../../../dist/js/angular/angular-animate.js"></script>
|
|
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
|
|
<script src="../../../../dist/js/angular-ui/angular-ui-router.js"></script>
|
|
<script src="../../../../dist/js/ionic-angular.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div ng-controller="MyCtrl">
|
|
<header-bar title="'Tap Inputs'" type="bar-positive"></header-bar>
|
|
|
|
<content has-header="true">
|
|
<form name="myForm">
|
|
|
|
<div class="list">
|
|
|
|
<div class="item item-divider">
|
|
Checkbox
|
|
</div>
|
|
<checkbox ng-model="value1">
|
|
Checkbox Value 1
|
|
</checkbox>
|
|
<div class="item">
|
|
Value 1:
|
|
<input type="checkbox" ng-model="value1">
|
|
{{value1}}
|
|
</div>
|
|
<checkbox ng-model="value2" ng-true-value="YES" ng-false-value="NO">
|
|
Checkbox Value 2
|
|
</checkbox>
|
|
<div class="item">
|
|
Value 2:
|
|
<input type="checkbox" ng-model="value2" ng-true-value="YES" ng-false-value="NO">
|
|
{{value2}}
|
|
</div>
|
|
<checkbox ng-model="value3" ng-checked="true" ng-true-value="yup" ng-false-value="nope">
|
|
Checkbox Initially checked with ng-checked=true, value: {{ value3 }}
|
|
</checkbox>
|
|
<checkbox ng-model="value4" ng-change="checkboxChange()" ng-true-value="yup" ng-false-value="nope">
|
|
Checkbox Change: {{ value4ChangeValue }}
|
|
</checkbox>
|
|
|
|
<div class="item item-divider">
|
|
Toggle
|
|
</div>
|
|
<toggle ng-model="toggle1">
|
|
Toggle 1: {{ toggle1 }}
|
|
</toggle>
|
|
<toggle ng-model="toggle2" ng-true-value="yup" ng-false-value="nope">
|
|
Toggle 2: {{ toggle2 }}
|
|
</toggle>
|
|
<toggle ng-model="toggle3" ng-checked="true">
|
|
Toggle 3, ng-checked initially set to true, {{ toggle3 }}
|
|
</toggle>
|
|
<toggle ng-model="toggle4" ng-change="toggleChange()" ng-true-value="yup" ng-false-value="nope">
|
|
Toggle Change: {{ toggle4ChangeValue }}
|
|
</toggle>
|
|
<div class="item">
|
|
Toggle 1:
|
|
<input type="checkbox" ng-model="toggle1">,
|
|
Toggle 2:
|
|
<input type="checkbox" ng-model="toggle2" ng-true-value="yup" ng-false-value="nope">,
|
|
</div>
|
|
|
|
<div class="item item-divider">
|
|
Radio
|
|
</div>
|
|
<radio
|
|
ng-repeat="radioItem in radioItems"
|
|
ng-value="radioItem.value"
|
|
ng-model="selectedValues.radio"
|
|
ng-change="radioChanged()">
|
|
{{ radioItem.text }}
|
|
</radio>
|
|
<div class="item">
|
|
Selected Radio Value: {{ selectedValues.radio }},
|
|
Changed: {{ radioChangeCount }},
|
|
Watch Count: {{ radioWatchCount }}
|
|
</div>
|
|
|
|
<div class="item item-divider">
|
|
Other Tests
|
|
</div>
|
|
|
|
<a href="clickTests.html" class="item">
|
|
Click Tests
|
|
</a>
|
|
|
|
<a href="/test/" class="item">
|
|
CSS Tests
|
|
</a>
|
|
|
|
<a href="./" class="item">
|
|
All JS Tests
|
|
</a>
|
|
|
|
</div>
|
|
|
|
</form>
|
|
|
|
</content>
|
|
</div>
|
|
|
|
<script>
|
|
angular.module('ionicApp', ['ionic'])
|
|
|
|
.controller('MyCtrl', function($scope) {
|
|
$scope.value1 = true;
|
|
$scope.value2 = 'NO';
|
|
|
|
$scope.checkboxChange = function() {
|
|
$scope.value4ChangeValue = 'Random number: ' + Math.floor(Math.random() * 1000);
|
|
};
|
|
|
|
$scope.toggleChange = function() {
|
|
$scope.toggle4ChangeValue = 'Random number: ' + Math.floor(Math.random() * 1000);
|
|
};
|
|
|
|
$scope.radioItems = [
|
|
{ text: 'Green Back Packers', value: 'packers' },
|
|
{ text: 'Minnesota Vikings', value: 'vikings' },
|
|
{ text: 'Chicago Bears', value: 'bears' },
|
|
];
|
|
$scope.selectedValues = { radio: 'packers' };
|
|
|
|
$scope.radioChangeCount = 0;
|
|
$scope.radioChanged = function() {
|
|
$scope.radioChangeCount++;
|
|
};
|
|
|
|
$scope.radioWatchCount = 0;
|
|
$scope.$watch('selectedValues.radio', function(val) {
|
|
$scope.radioWatchCount++;
|
|
})
|
|
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |