Ionic基础——表单输入ion-checkbox ion-radio ion-toggle ion-spinner-优快云博客

本文链接：https://blog.youkuaiyun.com/bboyjoe/article/details/50685908

本文深入探讨了Ionic框架中的复选按钮、单选按钮、开关按钮和等待指示器组件的功能与用法，包括样式定制、数据绑定及事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.复选按钮 : ion-checkbox

ionic的复选按钮脱胎于HTML标准的checkbox元素，可以在一组选项中同时选中多个。

使用ion-checkbox指令声明复选按钮元素：

<ion-checkbox>...</ion-checkbox>

与标准的checkbox相比，使用ionic的ion-checkbox有几个优势：

1.样式更美观，与移动端的UI更匹配；

2.支持数据绑定。使用可选的ng-model属性，可以直接将选中状态绑定到作用域上的变量；

3.直接使用文本子元素作为标签。

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
	<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
    <script src="../../lib/js/ionic.bundle.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../../lib/css/ionic.min.css">
</head>
<body ng-controller="myCtrl">
	<ion-header-bar class="bar-positive">
		<h1 class="title">ion-checkbox</h1>
	</ion-header-bar>
	<ion-content>
		<ion-list>
			<ion-checkbox class="checkbox-dark" ng-repeat="item in items" ng-model="item.selected">
				{{item.label}} : {{item.selected}}
			</ion-checkbox>
		</ion-list>
	</ion-content>
</body>
</html>
<script>
angular.module("myApp",["ionic"])
.controller("myCtrl",function($scope){
	$scope.items = [
		{label:"HTML5",selected:true},
		{label:"CSS3"},
		{label:"ECMAScript6"}
	];
});

</script>

二.单选按钮：ion-radio

和复选按钮类似，ionic的单选按钮脱胎于HTML标准的radio元素，用来在一组互斥的选项中进行选择：

使用ion-radio声明单选按钮元素：

<ion-radio>...</ion-radio>

和HTML的radio相比，ion-radio的改进也是明显的：

1. 与移动端的UI更匹配；

2. 使用可选的ng-model属性，实现与作用域变量的数据绑定；

3. 使用可选的ng-value属性，可以使用作用域变量设置单选按钮对应的值。

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
	<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
    <script src="../../lib/js/ionic.bundle.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../../lib/css/ionic.min.css">
</head>
<body ng-controller="myCtrl">
	<ion-header-bar class="bar-positive">
		<h1 class="title">ion-radio</h1>
	</ion-header-bar>
	<ion-content>
		<div class="list">
			<div class="item item-divider">Your choice : {{ret.choice}}</div>
			<ion-radio radio-color="balanced"  ng-repeat="item in items"
					   ng-model="ret.choice" ng-value="item">
				{{item}}

			</ion-radio>
		</div>
	</ion-content>
</body>
</html>
<script>
angular.module("myApp",["ionic"])
.controller("myCtrl",function($scope){
	$scope.items=["HTML5","ES6","CSS3"];
	$scope.ret = {choice:"CSS3"};
});

</script>

三. 开关按钮 : ion-toggle

开关和复选按钮的作用一致，都是从一组选项中进行多重选择。

在ionic中，使用ion-toggle指令声明开关元素：

<ion-toggle></ion-toggle>

ion-toggle有两个可选的属性：

ng-model - 模型变量。和复选按钮一样，开关按钮也可以使用可选的ng-model属性实现与作用域变量的双向绑定。
toggle-class - 样式类。可以使用可选的toggle-class属性为开关按钮声明额外的样式。比如：toggle-{color} 用来声明配色方案。

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
	<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
    <script src="../../lib/js/ionic.bundle.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../../lib/css/ionic.min.css">
</head>
<body ng-controller="myCtrl">
	<ion-header-bar class="bar-positive">
		<h1 class="title">ion-toggle</h1>
	</ion-header-bar>
	<ion-content>
		<ion-list>
			<div class="item item-divider">前端技术</div>
			<ion-toggle toggle-class="toggle-dark"  ng-repeat="item in items" ng-model="item.selected">{{item.text}} / {{item.selected}}</ion-toggle>
		</ion-list>
	</ion-content>
</body>
</html>
<script>
angular.module("myApp",["ionic"])
.controller("myCtrl",function($scope){
	$scope.items=[
		{text:"HTML5"},
		{text:"ECMAScript6",selected:true},
		{text:"CSS3",selected:true}
	];
});

</script>

四.等待指示器 : ion-spinner

当App在进行耗时地处理时，给用户一个明显的提示反馈，可以营造良好的体验。

ionic的spinner使用SVG和JavaScript实现，因此可以缩放、添加样式并具有动画效果。

使用ion-spinner指令声明spinner对象：

<ion-spinner></ion-spinner>

ion-spinner的icon属性是可选的，用来指定SVG图标名称。请注意，这里的名称不是 ionic的图标名称。当前支持的SVG图标名称请参见示例代码。

ionic的预置样式类：spinner-{color}可以用来声明配色方案，也可以自定义样式，比如设置大小等：

.spinner svg{ 
     width: 28px; height: 28px; stroke: #444; fill: #444; 
}

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
	<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
    <script src="../../lib/js/ionic.bundle.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../../lib/css/ionic.min.css">
</head>
<body ng-controller="myCtrl">
	<ion-header-bar class="bar-positive">
		<h1 class="title">ion-spinner</h1>
	</ion-header-bar>
	<ion-content>
		<ion-list>
			<ion-item ng-repeat="item in items" >
				<ion-spinner icon="{{item}}"></ion-spinner>
					{{item}}
			</ion-item>
		</ion-list>
	</ion-content>
</body>
</html>
<script>
angular.module("myApp",["ionic"])
.controller("myCtrl",function($scope){
	$scope.items = ["android","ios","ios-small","bubbles","circles",
		"crescent","dots","lines","ripples","spiral"];
});
</script>