您的位置：首页 > 其它

Ionic中单选按钮radio的简单使用

2017-10-18 20:45 260 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ionic中单选按钮radio的简单使用</title>
<link rel="stylesheet" href="../ionic-v1.3.3/css/ionic.css">
<script src="../ionic-v1.3.3/js/ionic.bundle.js"></script>
<script>
var app = angular.module("myApp",['ionic']);
app.controller("myCtrl",function ($scope) {
//定义包含多个对象数据的数组
$scope.list = [
{
value:"A选项，紫气东来"
},
{
value:"B选项，西天极乐"
},
{
value:"C选项，南极仙翁"
},
{
value:"D选项，北国风光"
}
];
$scope.auto = {
autoRadio:"自定义选项卡"
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
讲解：<br/>
1. 遍历的数组共有4个对象属性，都含有value值；<br/>
2. 使用ng-repeat遍历数组数据后，从上至下4个单选按钮分别对应数组4个对象属性值；<br/>
3. ng-value="item.value"：表示ion-radio标签的值被点击时，当前ion-radio标签的文本值由绑定的"自定义选项"变为对应下标的数组对象value值；<br/>

<!--
1. ion-header-bar： 固定在屏幕顶部的一个头部标题栏。
2. align-title: 对齐 title 。如没有设置，它将会按照手机的默认排版(Ios的默认是居中，Android默认是居左)。
它的值可以是 'left','center','right'。
3. ion-content指令提供一个易用的内容区域，该区域可以用ion的自定义滚动视图进行配置，或浏览器内置的溢出滚动。
4. item-divider: 添加 item-divider 类为卡片(card)的应用添加头部与底部；
5. ion-radio：单选按钮。
-->
<ion-header-bar class="badge-calm" align-title="center">
<p class="title">Ionic中单选按钮radio的简单使用</p>
</ion-header-bar>

<ion-content style="text-align: center">
<div class="list">
<div class="item item-divider">
<h3>选取的值为：{{auto.autoRadio}}</h3>
</div>

<ion-radio
ng-repeat="item in list"
ng-value="item.value"
ng-model="auto.autoRadio">
{{item.value}}
</ion-radio>
</div>
</ion-content>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航