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

最新推荐文章于 2019-04-05 11:31:00 发布

Dewey666

最新推荐文章于 2019-04-05 11:31:00 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏：效果初现文章标签： ng-value ng-repeat ng-model controller radio

本文链接：https://blog.youkuaiyun.com/IT666DHW/article/details/78277361

效果初现专栏收录该内容

108 篇文章

订阅专栏

本文介绍如何在AngularJS中使用单选按钮。通过创建一个包含不同选项的对象数组，并利用ng-repeat指令进行遍历显示，实现了单选按钮的动态绑定及选择功能。文章详细解释了ng-value和ng-model指令的作用。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS中单选按钮radio的简单使用</title>
    <script src="../js/angular.js"></script>
    <script>
        var app = angular.module("myApp",[]);
        app.controller("myCtrl",function ($scope) {
            //定义包含多个对象数据的数组
            $scope.radios = [
                {
                    key:"A",
                    value:"A选项：紫气东来"
                },
                {
                    key:"B",
                    value:"B选项：西天极乐"
                },
                {
                    key:"C",
                    value:"C选项：南极仙翁"
                },
                {
                    key:"D",
                    value:"D选项：北国风光"
                }
            ];
            $scope.auto = {
                autoRadio:"自定义选项卡"
            }
        });
    </script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
        讲解：<br/>
        1. 遍历的数组共有4个对象属性，都含有key值和value值；<br/>
        2. 使用ng-repeat遍历数组数据后，从上至下4个单选按钮分别对应数组4个对象属性；<br/>
        3. ng-value="r.key"：表示input标签的值被点击时，当前inpt标签的文本值由绑定的"自定义选项"变为对应下标的数组对象value值；<br/>
    <center>
        <!--  使用ng-repeat遍历数组数据：自定义变量名 in 数组名   ng-value 指令用于设置 input 或 select 元素的 value 属性。    -->
        <ul ng-repeat="r in radios">
            <input type="radio" ng-value="r.value" ng-model="auto.autoRadio"/><br/>
            {{i.value}}
        </ul>

        <h3>{{auto.autoRadio}}</h3>
    </center>
</body>
</html>