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 相关文章推荐
jquery 指南/入门基础
Nov 30 Javascript
不安全的常用的js写法
Sep 15 Javascript
JS实现仿FLASH效果的竖排导航代码
Sep 15 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
Aug 02 Javascript
SelecT下拉框选中和取值的解决方法
Nov 22 Javascript
Javascript中数组去重与拍平的方法示例
Feb 03 Javascript
AngularJs 常用的过滤器
May 15 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
Jul 12 Javascript
vue中使用input[type=&quot;file&quot;]实现文件上传功能
Sep 10 Javascript
Node批量爬取头条视频并保存方法
Sep 20 Javascript
js实现简单掷骰子效果
Oct 24 Javascript
手把手教您实现react异步加载高阶组件
Apr 07 Javascript
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
YII框架行为behaviors用法示例
2019/04/26 PHP
Highslide.js是一款基于js实现的网页中图片展示插件
2020/03/30 Javascript
js 单击式的下拉菜单效果实例
2013/08/13 Javascript
js输出阴历、阳历、年份、月份、周示例代码
2014/01/29 Javascript
jquery序列化form表单使用ajax提交后处理返回的json数据
2014/03/03 Javascript
js创建对象的方式总结
2015/01/10 Javascript
jQuery鼠标事件汇总
2015/08/30 Javascript
javascript性能优化之事件委托实例详解
2015/12/12 Javascript
jQuery检测滚动条是否到达底部
2015/12/15 Javascript
JavaScript获取URL中参数querystring的方法详解
2016/10/11 Javascript
vue的mixins属性详解
2018/03/14 Javascript
javascript匿名函数中的'return function()'作用
2018/10/15 Javascript
AJAX在JQuery中的应用详解
2019/01/30 jQuery
vue swipe自定义组件实现轮播效果
2019/07/03 Javascript
layui 实现表单和文件上传一起传到后台的例子
2019/09/16 Javascript
vue中实现回车键登录功能
2020/02/19 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
2020/02/23 Javascript
JS正则表达式验证密码强度
2020/03/18 Javascript
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
2020/04/30 jQuery
[42:39]老党炸弹人试玩视频
2014/09/03 DOTA
python实现输入数字的连续加减方法
2018/06/22 Python
python爬取微信公众号文章
2018/08/31 Python
Flask之pipenv虚拟环境的实现
2019/11/26 Python
Python基于进程池实现多进程过程解析
2020/04/30 Python
Marmot土拨鼠官网:美国专业户外运动品牌
2018/01/11 全球购物
英国最全面的橄榄球联盟门票网站:Live Rugby Tickets
2018/10/06 全球购物
Allsole美国/加拿大:英国一家专门出售品牌鞋子的网站
2018/10/21 全球购物
用Python写一个for循环的例子
2016/07/19 面试题
学生党员思想汇报
2013/12/28 职场文书
国税会议欢迎词
2014/01/16 职场文书
销售经理工作职责
2014/02/03 职场文书
给小学生的新年寄语
2014/04/04 职场文书
实习单位推荐信
2015/03/27 职场文书
联谊活动总结范文
2015/05/09 职场文书
格列佛游记读书笔记
2015/06/30 职场文书
幼儿园小朋友毕业感言
2015/07/30 职场文书