angularJS的radio实现单项二选一的使用方法

废话少说，直接上代码：

 <div class="col-xs-3">
 <input type="radio" ng-value=1 ng-model="sss" name="aaa" >男
 </label>
 <label>
 <input type="radio" ng-value=0 ng-model="sss" name="aaa">女
 </label>
</div>
<div>
 {{sss}}
</div>

在ng中使用radio实现二选一的时候，需要注意几个地方：

第一：保持name的属性值要是一致的；

第二：保持ng-model对应同一个值；

第三：需要为每个radio设置ng-value，因为ng-model的对应的值就是选中的那个radio所对应的ng-value的值。

由此实现了单选，且能够传递不同的值。

以上这篇angularJS的radio实现单项二选一的使用方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jquery获取radio值(单选组radio)

    单选组radio: $("input[@type=radio][@checked]").val(); 单选组radio: $("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项 获取一组radio被选中项的值 var item = $('input[@name=items][@checked]').val(); radio单选组的第二个元素为当前选中值 $('input[@

  • js实现表单Radio切换效果的方法

    js实现表单Radio切换效果的方法

    本文实例讲述了js实现表单Radio切换效果的方法.分享给大家供大家参考.具体如下: 这里基于js实现表单中的Radio单选框切换效果,当选中某个单选框的时候,所属范围会一同变换,我觉得大家应该收藏一下,以前想用的时候苦苦叫不上这种效果的名字,现在找到了,而且实现起来竟然如此简单,有些地方要注意,获取标签名为myradio的标签. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-table-radio-cha-codes/ 具体代码如下:

  • angularJS的radio实现单项二选一的使用方法

    废话少说,直接上代码: <div class="col-xs-3"> <input type="radio" ng-value=1 ng-model="sss" name="aaa" >男 </label> <label> <input type="radio" ng-value=0 ng-model="sss" name="

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

    AngularJS对表单的处理相当简单.在AngularJS使用双向数据绑定方式进行表单验证的时候,实质上它在帮我们进行表单处理. 使用复选框的的例子有很多,同时我们对它们的处理方式也有很多.这篇文章中我们将看一看把复选框和单选按钮同数据变量绑定的方法和我们对它的处理办法. 创建Angular表单 在这篇文章里,我们需要两个文件:index.html和app.js.app.js用来保存所有的Angular代码(它不大),而index.html是动作运行的地方.首先我们创建AngularJS文件.

  • AngularJS 购物车全选/取消全选功能的实现方法

    AngularJS 购物车全选/取消全选功能的实现方法

    刚学习angularJS,于是练习写了一个类似于购物车的全选/取消全选的功能,主要实现的功能有: 1.勾选全选checkbox,列表数据全部被勾选,取消同理,用ng-model实现双向绑定: 2.选中列表中的所有checkbox,全选也会被勾选:(这里我想到的方法是给每一个对象增加checked字段,然后勾选触发echoChange()函数,用了一个cc变量计算当前checked为true的个数,然后再判断被勾选个数与数组长度是否相等,相等则证明全部被勾选,于是全选按钮也赋值为true;不知道还

  • jquery checkbox无法用attr()二次勾选问题的解决方法

    今晨,漂亮的测试妹妹提了个奇怪的bug,说我一功能checkbox时隐时现,比如第一次打开有勾选,第n次打开可能就不选了. 想到与美女有亲密接触机会,马上鸡动起来. 经过偶层层抽次剥茧(da da jiang you),终于知道了原因:attr()在二次选中勾选框时,失效. 比如,如下HTML页面,一点[选中].二点[取消选中].三点[选中],瞧,不行了呗. 1.html <!doctype html> <html lang="en"> <head>

  • AngularJS使用ng-repeat遍历二维数组元素的方法详解

    AngularJS使用ng-repeat遍历二维数组元素的方法详解

    本文实例讲述了AngularJS使用ng-repeat遍历二维数组元素的方法.分享给大家供大家参考,具体如下: 问题: 最近在做报表的项目,有一种情况是后台返回给我的是一个二维数组,在前台将数据放入到表格中,因为我们用的是angularJS的前台框架,所以利用ng-repeat来实现. 实现方法: 首先在js中: $scope.Week = [[ '云南省 ', 'a', 's', 'd', 'e', 'w','t' ],[ '陕西省 ', 'l', 'p', 'o', 'i', 'u','y'

  • vue二选一tab栏切换新做法实现

    vue二选一tab栏切换新做法实现

    问题描述 在我们做项目的过程中,有时候会要做一些tab栏切换效果.有两个tab的,有三个tab的,甚至有五六七八个tab的.平常我们直接拿饿了么的tab组件用就行了,但是偶尔自己闲着没事,自己写个两个tab切换效果的,即二选一效果.闲话少说,上动态效果图 本案例适合两个tab的(三个tab的可以仿照我的写,如果是四五个tab用饿了么组件会更快些) 代码如下 HTML部分 <template> <div id="app"> <div class="

  • js实现checkbox全选、不选与反选的方法

    本文实例讲述了js实现checkbox全选.不选与反选的方法.分享给大家供大家参考.具体分析如下: 一.思路: 1. 获取元素 2. 给全选 不选 反选添加点击事件 3. 用for循环checkbox 4. 把checkbox的checked设置为true即实现全选 5. 把checkbox的checked设置为false即实现不选 6. 通过if判断,如果checked为true选中状态的,就把checked设为false不选状态,如果checked为false不选状态的,就把checked设

  • AngularJS实现图片上传和预览功能的方法分析

    本文实例讲述了AngularJS实现图片上传和预览功能的方法.分享给大家供大家参考,具体如下: html5原生方法 先看一下html5原生方法上传和预览图片的实现: // <img id="img-preview"> var imgPreview = document.getElementById("img-preview"); // <input id="img-input" type="file">

  • AngularJS实现给动态生成的元素绑定事件的方法

    本文实例讲述了AngularJS实现给动态生成的元素绑定事件的方法.分享给大家供大家参考,具体如下: 1 . 我们知道在jQuery中,动态生成一个元素,如果要在动态生成元素的同时,动态绑定事件,可以通过live/on方法(在jquery3.0中已经废除了bind方法). 2 . 在AngularJS中,操作DOM一般在指令中完成,事件监听机制是在对于已经静态生成的dom绑定事件,而如果在指令中动态生成了DOM节点,动态生成的节点不会被JS事件监听. 举例来说: angular.module('

  • AngularJS使用angular.bootstrap完成模块手动加载的方法分析

    本文实例分析了AngularJS使用angular.bootstrap完成模块手动加载的方法.分享给大家供大家参考,具体如下: 之前我们看到使用ng-app指令,可以实现模块的自动加载.现在我们看下,angular中如何手动加载模块.需要使用到angular.bootstrap这个函数. <html> <head> <script src="angular.js"></script> <script> // 创建moudle1

随机推荐