<!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>
Ionic中单选按钮radio的简单使用
最新推荐文章于 2021-06-28 16:02:10 发布