mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
242 lines
7.2 KiB
HTML
Executable File
242 lines
7.2 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.bundle.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div ng-controller="MyCtrl">
|
|
<ion-header-bar title="'Tap Inputs'" type="bar-positive"></ion-header-bar>
|
|
|
|
<ion-content class="has-header">
|
|
<form name="myForm">
|
|
|
|
<div class="list">
|
|
|
|
<div class="item item-divider">
|
|
Checkbox
|
|
</div>
|
|
<ion-checkbox ng-model="value1">
|
|
Checkbox Value 1
|
|
</ion-checkbox>
|
|
<div class="item">
|
|
Value 1:
|
|
<input type="checkbox" ng-model="value1">
|
|
{{value1}}
|
|
</div>
|
|
<ion-checkbox ng-model="value2" ng-true-value="YES" ng-false-value="NO">
|
|
Checkbox Value 2
|
|
</ion-checkbox>
|
|
<div class="item">
|
|
Value 2:
|
|
<input type="checkbox" ng-model="value2" ng-true-value="YES" ng-false-value="NO">
|
|
{{value2}}
|
|
</div>
|
|
<ion-checkbox ng-model="value3" ng-checked="true" ng-true-value="yup" ng-false-value="nope">
|
|
Checkbox Initially checked with ng-checked=true, value: {{ value3 }}
|
|
</ion-checkbox>
|
|
<ion-checkbox ng-model="value4" ng-change="checkboxChange()" ng-true-value="yup" ng-false-value="nope">
|
|
Checkbox Change: {{ value4ChangeValue }}
|
|
</ion-checkbox>
|
|
|
|
<div class="item item-divider">
|
|
Toggle
|
|
</div>
|
|
<ion-toggle ng-model="toggle1">
|
|
Toggle 1: {{ toggle1 }}
|
|
</ion-toggle>
|
|
<ion-toggle ng-model="toggle2" ng-true-value="yup" ng-false-value="nope">
|
|
Toggle 2: {{ toggle2 }}
|
|
</ion-toggle>
|
|
<ion-toggle ng-model="toggle3" ng-checked="true">
|
|
Toggle 3, ng-checked initially set to true, {{ toggle3 }}
|
|
</ion-toggle>
|
|
<ion-toggle ng-model="toggle4" ng-change="toggleChange()" ng-true-value="yup" ng-false-value="nope">
|
|
Toggle Change: {{ toggle4ChangeValue }}
|
|
</ion-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>
|
|
|
|
<li ng-if="true" class="item item-toggle">
|
|
<label class="toggle">
|
|
<input type="checkbox">
|
|
<div class="track">
|
|
<div class="handle"></div>
|
|
</div>
|
|
</label>
|
|
HTML Only
|
|
</li>
|
|
|
|
<div class="item item-divider">
|
|
Radio
|
|
</div>
|
|
<ion-radio
|
|
ng-repeat="radioItem in radioItems"
|
|
ng-value="radioItem.value"
|
|
ng-model="selectedValues.radio"
|
|
ng-change="radioChanged()">
|
|
{{ radioItem.text }}
|
|
</ion-radio>
|
|
<div class="item">
|
|
Selected Radio Value: {{ selectedValues.radio }},
|
|
Changed: {{ radioChangeCount }},
|
|
Watch Count: {{ radioWatchCount }}
|
|
</div>
|
|
|
|
<div class="item item-divider">
|
|
Select
|
|
</div>
|
|
|
|
<div class="item item-input item-select">
|
|
<div class="input-label">
|
|
Div Wrapped Select
|
|
</div>
|
|
<select>
|
|
<option>Blue</option>
|
|
<option selected="">Green</option>
|
|
<option>Red</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="item item-input item-select">
|
|
<div class="input-label">
|
|
Div Wrapped Select
|
|
</div>
|
|
<select>
|
|
<option>ARC-170</option>
|
|
<option>A-wing</option>
|
|
<option>Delta-7</option>
|
|
<option>Naboo N-1</option>
|
|
<option>TIE</option>
|
|
<option selected="">X-wing</option>
|
|
<option>Y-wing</option>
|
|
</select>
|
|
</div>
|
|
|
|
<label class="item item-input item-select">
|
|
<div class="input-label">
|
|
Label Wrapped Select
|
|
</div>
|
|
<select>
|
|
<option>2-1B</option>
|
|
<option>B1</option>
|
|
<option>C-3PO</option>
|
|
<option>IG-88</option>
|
|
<option>IT-O</option>
|
|
<option selected="">R2-D2</option>
|
|
</select>
|
|
</label>
|
|
|
|
<label class="item item-input item-select">
|
|
<div class="input-label">
|
|
Label Wrapped Select
|
|
</div>
|
|
<select>
|
|
<option>Alderaan</option>
|
|
<option selected="">Dagobah</option>
|
|
<option>Felucia</option>
|
|
<option>Geonosis </option>
|
|
<option>Hoth</option>
|
|
<option>Kamino</option>
|
|
<option>Mygeeto</option>
|
|
<option>Naboo</option>
|
|
<option>Tataouine</option>
|
|
<option>Utapau</option>
|
|
<option>Yavin</option>
|
|
</select>
|
|
</label>
|
|
|
|
<div class="item item-input item-select">
|
|
<div class="input-label">
|
|
Country
|
|
</div>
|
|
<select>
|
|
<option>Great Britain</option>
|
|
<option selected>Saint Vincent and the Grenadines option should be a text overflow issue</option>
|
|
<option>United States</option>
|
|
</select>
|
|
</div>
|
|
<div class="item item-divider">
|
|
File Input
|
|
</div>
|
|
<label class="item item-input">
|
|
<div class="input-label">
|
|
<i class="icon ion-document-text"></i> File
|
|
</div>
|
|
<input type="file"/>
|
|
</label>
|
|
|
|
<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>
|
|
|
|
</ion-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>
|