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

最新推荐文章于 2024-06-11 10:54:21 发布

Dewey666

最新推荐文章于 2024-06-11 10:54:21 发布

阅读量3.6k

点赞数

分类专栏：效果初现文章标签： ion-header-bar align-title ion-content指令 item-divider ion-radio单选按钮

本文链接：https://blog.csdn.net/IT666DHW/article/details/78277567

版权

效果初现专栏收录该内容

108 篇文章 3 订阅

订阅专栏

<!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>

Dewey666

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ionic中单选按钮radio的简单使用

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.bund
复制链接

扫一扫