HTML angular单选按钮

最新推荐文章于 2022-04-21 15:03:44 发布

qq_4027

最新推荐文章于 2022-04-21 15:03:44 发布

阅读量543

点赞数

分类专栏：网页

网页专栏收录该内容

33 篇文章

订阅专栏

本文介绍了一个使用AngularJS实现的单选按钮组示例，通过定义控制器和作用域变量来展示不同的单选选项，并实时显示用户的选择状态。

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

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script type="text/javascript" src="js/angular.js" ></script>
       <script>
           var app = angular.module("myApp",[]);
           app.controller("myCtrl",function($scope){

               $scope.radios = [{
                   keys:"A",
                   value:"A选项"
               },{
                   keys:"B",
                   value:"B选项"
               },{
                   keys:"C",
                   value:"C选项"
               },{
                   keys:"D",
                   value:"D选项"
               }];
               $scope.haha = {
                   hehe:"A"
               };
           });
       </script>
   </head>
   <body ng-app="myApp" ng-controller="myCtrl">
       <ul ng-repeat="i in radios">
           <input type="radio" name="ra"
               ng-value="i.keys"
               ng-model="haha.hehe"/>
           {{i.value}}<br/>

       </ul>
       <p>选中了:{{haha.hehe}}<p/>
   </body>
</html>