Angularjs单选框相关的示例代码


Posted in Javascript onAugust 17, 2017

本文介绍了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>

Angularjs单选框相关的示例代码

不使用ng-repeat

2)使用ng-repeat

则无法显示

<label ng-repeat="x in arrStr">
    <input type="radio" name="type1" ng-model="demo" value="{{x}}">
    {{x}}
  </label>
  {{demo}}

3)解决2的问题

若使用ng-repeat则必须在ng-model中加入$parent

<div ng-app="myApp" ng-controller="myCtrl">
    <label ng-repeat="x in arrStr">
      <input type="radio" name="demo" value="{{x}}" ng-model="$parent.demo">{{x}}
    </label>
    <h1>{{demo}}</h1>
  </div>

Angularjs单选框相关的示例代码

成功显示

原因:因为在ng-repeat中,$scope的作用域不是全局的,相当于局部变量,无法在全局访问到其中变量。所以要使用$parent来使其成为全局变量,可全局访问。

2.ng使用单选框的例子

从json动态生成,数据绑定

1)生成单选框的 json 数据

[{
    "display":"开关",
    "data_range":["true","false"]
   },
   {
    "display":"工作模式",
    "data_range":["自动","手动"]
   }]

2)HTML代码

由json数据可以看出,需要使用两个ng-repeat,一个用来遍历整体,一个用来遍历选项

<div ng-app="myApp" ng-controller="myCtrl">
    <div ng-repeat="x in str">
      <span>{{x.display}}:</span>
      <label ng-repeat="y in x.data_range">
        <input type="radio" name="{{x.display}}" ng-model="$parent.demo" value="{{y}}">{{y}}    
      </label>
      你的选择:{{demo}}
    </div>
  </div>

3)js代码

由于用的固定数据,就是简单的初始化

var app = angular.module("myApp", [])
    app.controller("myCtrl", function($scope, $log, $http){
      $scope.str = [
        {
          "display":"开关",
          "data_range":["true","false"]
        },
        {
          "display":"工作模式",
          "data_range":["自动","手动"]
        }
      ]
    })

4)结果截图

结果截图

Angularjs单选框相关的示例代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一段利用WSH获取登录时间的jscript代码
May 11 Javascript
重载toString实现JS HashMap分析
Mar 13 Javascript
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
Jan 11 Javascript
js操作table示例(个人心得)
Nov 29 Javascript
jQuery实现自定义下拉列表
Jan 05 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
Mar 02 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
Sep 08 Javascript
Vue.js第四天学习笔记
Dec 02 Javascript
Node绑定全局TraceID的实现方法
Nov 14 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
Feb 11 Javascript
微信小程序中的列表切换功能实例代码详解
Jun 09 Javascript
vue中如何添加百度统计代码
Dec 19 Vue.js
js实现简易聊天对话框
Aug 17 #Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
Aug 17 #Javascript
javascript 日期相减-在线教程(附代码)
Aug 17 #Javascript
微信小程序引用公共js里的方法的实例详解
Aug 17 #Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
Aug 17 #Javascript
史上最全JavaScript数组去重的十种方法(推荐)
Aug 17 #Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
Aug 17 #Javascript
You might like
php_xmlhttp 乱码问题解决方法
2009/08/07 PHP
PHP实现域名whois查询的代码(数据源万网、新网)
2010/02/22 PHP
解析thinkphp中的M()与D()方法的区别
2013/06/22 PHP
Codeigniter框架实现获取分页数据和总条数的方法
2014/12/05 PHP
PHP检测接口Traversable用法详解
2017/12/29 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
PDO::getAvailableDrivers讲解
2019/01/28 PHP
XMLHttpRequest处理xml格式的返回数据(示例代码)
2013/11/21 Javascript
详解Javacript和AngularJS中的Promises
2016/02/09 Javascript
JavaScript必知必会(五) eval 的使用
2016/06/08 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
2016/06/24 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
2017/04/22 Javascript
JQuery 获取Dom元素的实例讲解
2017/07/08 jQuery
Angularjs上传文件组件flowjs功能
2017/08/07 Javascript
JavaScript箭头函数中的this详解
2019/06/19 Javascript
[04:52]第二届DOTA2亚洲邀请赛主赛事第一天比赛集锦:OG娜迦海妖放大配合谜团大中3人
2017/04/02 DOTA
python遍历类中所有成员的方法
2015/03/18 Python
Python实现二维曲线拟合的方法
2018/12/29 Python
python3.4爬虫demo
2019/01/22 Python
python 标准差计算的实现(std)
2019/07/29 Python
python中用logging实现日志滚动和过期日志删除功能
2019/08/20 Python
matplotlib实现显示伪彩色图像及色度条
2019/12/07 Python
Python无损压缩图片的示例代码
2020/08/06 Python
python 解决selenium 中的 .clear()方法失效问题
2020/09/01 Python
css3制作动态进度条以及附加jQuery百分比数字显示
2012/12/13 HTML / CSS
CSS3中31种选择器使用方法教程
2013/12/05 HTML / CSS
八一演出活动方案
2014/02/03 职场文书
人大调研汇报材料
2014/08/14 职场文书
网络工程专业大学生求职信
2014/10/01 职场文书
2014年医务科工作总结
2014/12/18 职场文书
市场部经理岗位职责
2015/02/02 职场文书
学校体育节班级口号
2015/12/25 职场文书
关于实现中国梦的心得体会
2016/01/05 职场文书
入党转正申请自我鉴定
2019/06/25 职场文书
MySQL中几种插入和批量语句实例详解
2021/09/14 MySQL
Oracle数据库中通用的函数实例详解
2022/03/25 Oracle