使用AngularJS处理单选框和复选框的简单方法

最新推荐文章于 2021-02-06 12:53:29 发布
最新推荐文章于 2021-02-06 12:53:29 发布
阅读量93 收藏
点赞数
原文链接：http://www.cnblogs.com/bruce-gou/p/6361108.html
版权

在复选框中，可以绑定ng-model给false或者true值，即可选中或清除选中状态

如下图

 

 

而在单选框里就相对复杂一点，单选框要选中一个，就要给相同的name属性，然后绑定相同的ng-model，给代表各自的value值，如图

html

JS部分  就是你想让谁选中，就给$scope.edit.sort 这个value值就行了，我这个是后台传过来的

 

转载于:https://www.cnblogs.com/bruce-gou/p/6361108.html

weixin_30416497
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
AngularJS radio单选按钮
great_frank 的专栏
03-24 3万+
radio单选按钮，当选择不同的选项时，AngularJS会获取不同的值，从而实现插入不同内容的功能。
Angularjs单选框相关的示例代码
12-11
本文介绍了Angularjs单选框相关的示例代码，分享给大家。具体如下： 使用angular1.6.5 1.ng 获取ng-repeat遍历出来的radio的value 1）普通形式（不使用ng-repeat） 可以正常显示 <input type="radio" name="t1" ng-model="demo" value="a">a <br> <input type="radio" name="t1" ng-model="demo" value="b">b <h2>{{demo}}</h2> 不使用ng-repeat 2）使用ng-repeat 则无法显示
在 AngularJS 应用中处理单选框和复选框
青山的博客
04-01 319
https://www.oschina.net/translate/handling-checkboxes-and-radio-buttons-in-angular-forms
AngularJS单选框及多选框实现双向动态绑定
热门推荐
李刚的学习专栏
08-29 1万+
在AngularJS中提及双向数据绑定，大家肯定会想到ng-model指令。通过 value 属性指定选中状态下对应的值，并通过 ng-model 将单选框与 $scope 中的属性对应，实现双向绑定。通过AngularJS 的内置指令 ng-true-value 和 ng-false-value ，指定多选框在选中和未选中状态下对应的值，再通过ng-model 将其与 $scope 中的属性对应，便实现双向绑定。
Angularjs中单选按钮用法总结
Web魔法师
08-22 4236
单选按钮，比较常用，但是，使用时，总会出现一些问题，比如点击时，获得不了对应的值，或者单选按钮在页面加载时，不能默认显示所要选择的项等一系列问题。下面总结一下： Html页面： <input type="radio" name="myTestRadio" ng-model="vm.selection" ng-value="value" ng-check
在AngularJS应用中处理单选框和复选框
08-12
在AngularJS应用中处理单选框（Radio Buttons）和复选框（Checkboxes）是前端开发中的常见任务，尤其在构建交互式用户界面时。AngularJS是一个强大的MVC（Model-View-Controller）框架，它提供了丰富的数据绑定和...
AngularJS单选、复选框
04-30
AngularJS通过其丰富的指令系统，使得处理单选按钮和复选框变得简单。理解和熟练掌握这些指令，能够有效地提高开发效率，构建功能丰富的交互式Web应用。在实际项目中，我们还需要考虑响应式设计、表单验证、数据同步...
AngularJS单选框及多选框实现双向动态绑定.docx
01-12
这里，如果乒乓球的复选框被选中，$scope.person.like.pingpong将为true，反之为false。同理，对于足球和篮球。 四、完整示例 以下是一个完整的HTML示例，包含了上述单选框和多选框的双向绑定： ```html <!DOCTYPE...
angularjs判断复选框是否选中
A struggling white
04-13 694
AngularJS ng-repeat下使用ng-model 转
weixin_30501857的博客
06-03 182
大岩不灿发表于2014年2月19日浏览 493 次 举例： 1 2 3 blue:<input type="radio" value="1" ng-model="selectValue"/> red:<input type="radio" value="2" ng-model="selectValue"/> ye...
AngularJs 单选框nz-radio-group 中 ngModelChange方法不起作用
Meng123456xili的博客
11-19 3709
AngularJs，ngModel要配合name和id使用 <nz-radio-group [(ngModel)]="radioValue" name="radioValue" id="radioValue" [nzButtonStyle]="'solid'" (ngModelChange)="changeRadio()"> <label *ngFor="le...
js单选框选中后如何取消选中
datangxiajun的博客
08-09 4629
测试
angularjs中设置单选按钮默认被选中
xiaorumo的博客
12-07 3765
在需要默认选中的单选按钮上添加指令：ng-checked='true’就可以了 &lt;input type="radio" ng-model="myVar" value="dogs" ng-checked="true"&gt;Dogs &lt;input type="radio" ng-model="myVar" value="tuts&
js移除input单选框（radio）选中效果
jpjp2020的博客
07-28 9467
上午做类似于这样一个单选框效果，需要把弹窗内单选框后的文本赋值到弹窗父页面。 可是在js中移除最开始是这么做的。 $('.chose-box-li').children('input').attr('checked', 'true') $(this).children('input').attr('checked', 'true'); 看上去好像没什么问题，可是在开发者模式中查看： ...
angular单选按钮_使用AngularJS处理单选框和复选框的简单方法
weixin_32816563的博客
02-06 1042
AngularJS对表单的处理相当简单。在AngularJS使用双向数据绑定方式进行表单验证的时候，实质上它在帮我们进行表单处理。使用复选框的的例子有很多，同时我们对它们的处理方式也有很多。这篇文章中我们将看一看把复选框和单选按钮同数据变量绑定的方法和我们对它的处理办法。创建Angular表单在这篇文章里，我们需要两个文件:index.html和app.js。app.js用来保存所有的Angula...
使用JS控制单选框复选框和下拉框的回显
最新发布
05-25
单选框和复选框的回显可以使用 JavaScript 的 DOM 操作来实现。假设我们有以下 HTML 代码： ```html <label for="option1">选项1</label> <input type="radio" id="option1" name="options" value="1"> <label for="option2">选项2</label> <input type="radio" id="option2" name="options" value="2"> <label for="option3">选项3</label> <input type="checkbox" id="option3" name="options" value="3"> <label for="option4">选项4</label> <input type="checkbox" id="option4" name="options" value="4"> ``` 我们可以通过以下 JavaScript 代码来实现单选框和复选框的回显： ```javascript // 获取单选框和复选框元素 var option1 = document.getElementById("option1"); var option2 = document.getElementById("option2"); var option3 = document.getElementById("option3"); var option4 = document.getElementById("option4"); // 设置单选框和复选框的默认选中状态 option1.checked = true; option3.checked = true; // 监听单选框和复选框的变化，更新选中状态 option1.addEventListener("change", function() { option2.checked = false; }); option2.addEventListener("change", function() { option1.checked = false; }); option3.addEventListener("change", function() { option4.checked = false; }); option4.addEventListener("change", function() { option3.checked = false; }); ``` 这段代码首先获取了四个单选框和复选框的元素，并设置了选项1和选项3为默认选中状态。然后通过监听单选框和复选框的变化，更新其他选项的选中状态。 下拉框的回显也可以使用 JavaScript 的 DOM 操作来实现。假设我们有以下 HTML 代码： ```html <select id="fruit"> <option value="apple">苹果</option> <option value="banana">香蕉</option> <option value="orange">橙子</option> </select> ``` 我们可以通过以下 JavaScript 代码来实现下拉框的回显： ```javascript // 获取下拉框元素 var fruit = document.getElementById("fruit"); // 设置下拉框的默认选中状态 fruit.value = "banana"; // 监听下拉框的变化，更新选中状态 fruit.addEventListener("change", function() { if (fruit.value === "apple") { // do something } else if (fruit.value === "banana") { // do something } else if (fruit.value === "orange") { // do something } }); ``` 这段代码首先获取了下拉框的元素，并设置了香蕉为默认选中状态。然后通过监听下拉框的变化，更新其他选项的选中状态。根据选中的值，可以执行不同的操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值