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 相关文章推荐
javascript 面向对象编程 function也是类
Sep 17 Javascript
jQuery html()等方法介绍
Nov 18 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
Dec 05 Javascript
js控制文本框输入的字符类型方法汇总
Jun 19 Javascript
JS实现关闭当前页而不弹出提示框的方法
Jun 22 Javascript
微信小程序(三):网络请求
Jan 13 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
Apr 25 Javascript
原生js轮播特效
May 18 Javascript
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
angularjs数组判断是否含有某个元素的实例
Feb 27 Javascript
Vue-路由导航菜单栏的高亮设置方法
Mar 17 Javascript
vue+iview动态渲染表格详解
Mar 19 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
PHP $_FILES中error返回值详解
2014/01/30 PHP
php输入流php://input使用浅析
2014/09/02 PHP
PHP使用两个栈实现队列功能的方法
2018/01/15 PHP
对laravel的csrf 防御机制详解,及form中csrf_token()的存在介绍
2019/10/24 PHP
各种效果的jquery ui(接口)介绍
2008/09/17 Javascript
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
2011/09/19 Javascript
php,js,css字符串截取的办法集锦
2014/09/26 Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
2015/09/09 Javascript
jQuery实现选项卡切换效果简单演示
2015/12/09 Javascript
AngularJs基本特性解析(一)
2016/07/21 Javascript
js动态添加的DIV中的onclick事件简单实例
2016/07/25 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
2016/07/26 Javascript
jquery动态添加文本并获取值的方法
2016/10/12 Javascript
js实现界面向原生界面发消息并跳转功能
2016/11/22 Javascript
详解微信小程序 template添加绑定事件
2017/06/23 Javascript
详解React native全局变量的使用(跨组件的通信)
2017/09/07 Javascript
Node.js的Koa实现JWT用户认证方法
2018/05/05 Javascript
JavaScript对象拷贝与赋值操作实例分析
2018/12/10 Javascript
react中使用css的7中方式(最全总结)
2019/02/11 Javascript
jquery无缝图片轮播组件封装
2020/11/25 jQuery
多个vue子路由文件自动化合并的方法
2019/09/03 Javascript
微信小程序动态添加和删除组件的现实
2020/02/28 Javascript
js实现数据导出为EXCEL(支持大量数据导出)
2020/03/31 Javascript
Python方法的延迟加载的示例代码
2017/12/18 Python
一篇文章快速了解Python的GIL
2018/01/12 Python
python 读取文件并替换字段的实例
2018/07/12 Python
python 字符串只保留汉字的方法
2018/11/16 Python
python面试题Python2.x和Python3.x的区别
2019/05/28 Python
安装PyInstaller失败问题解决
2019/12/14 Python
python实现mask矩阵示例(根据列表所给元素)
2020/07/30 Python
基于python实现复制文件并重命名
2020/09/16 Python
Python利用matplotlib绘制折线图的新手教程
2020/11/05 Python
澳大利亚婴儿、幼儿和儿童在线设计师商店:Smooch Baby
2019/02/16 全球购物
生物医学工程专业学生求职信范文分享
2013/12/14 职场文书
小学教师管理制度
2014/01/18 职场文书
红色电影观后感
2015/06/18 职场文书