angular如何实现input checkbox / radio 的双向数据绑定

最新推荐文章于 2025-03-16 02:50:43 发布

weixin_30667649

最新推荐文章于 2025-03-16 02:50:43 发布

阅读量367

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/i-want-to-be-like-an-sun/p/7687393.html

本文介绍如何在AngularJS中使用Radio按钮和Checkbox，并通过示例代码展示了如何设置默认选中状态及如何获取选中项的数据。同时，还演示了如何通过ng-true-value和ng-false-value来定义Checkbox的真值和假值。

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

 1 <!DOCTYPE html>
 2 <html >
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>radio & checkbox</title>
 6     <script src="js/angular.js"></script>
 7 </head>
 8 <body ng-app="myApp" ng-controller="myCtrl">
 9     <input type="radio" name="sex" value="male" ng-model="person.sex" />男
10     <input type="radio" name="sex" value="female" ng-model="person.sex" />女
11     <input type="text" ng-model="person.sex" />
12 
13     <input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="person.like.pingpong" />乒乓球
14     <input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="person.like.football" />足球
15     <input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="person.like.basketball" />篮球
16     <span>{{ person.like.pingpong }} {{ person.like.football }} {{ person.like.basketball }} </span>
17     <br/>
18     <input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="btnGroup.audioBtn" ng-click="audiofun()"/>声音按钮
19     <input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="btnGroup.alarmBtn" ng-click="alarmfun()"/>报警按钮
20     <span>声音按钮{{ btnGroup.audioBtn }} 报警按钮{{ btnGroup.alarmBtn }}</span>
21 </body>
22 </html>
23 
24 <script type="text/javascript">
25     var app = angular.module('myApp', []);
26     app.run(function($rootScope) {
27         $rootScope.person = {
28             sex: "female",
29             like: {
30                 pingpong: true,
31                 football: true,
32                 basketball: false
33             }
34         };
35     })
36     .controller('myCtrl',function($scope){
37         $scope.btnGroup={audioBtn:true,alarmBtn:true};
38         $scope.audiofun=function(){
39           if($scope.btnGroup.audioBtn)
40           {
41              console.log($scope.btnGroup.audioBtn); 
42           }else{
43              console.log($scope.btnGroup.audioBtn); 
44           }
45         }
46         $scope.alarmfun=function(){
47           if($scope.btnGroup.alarmBtn)
48           {
49              console.log($scope.btnGroup.alarmBtn); 
50           }else{
51              console.log($scope.btnGroup.alarmBtn); 
52           }
53         }
54 
55     })
56 </script>