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无阻塞加载具体方式
Jun 28 Javascript
2016年最热门的15 款代码语法高亮工具,美化你的代码
Jan 06 Javascript
bootstrap-treeview自定义双击事件实现方法
Jan 09 Javascript
利用JavaScript阻止表单提交的两种方法
Aug 11 Javascript
JavaScript表单验证开发
Nov 23 Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
Feb 10 Javascript
使用vue制作探探滑动堆叠组件的实例代码
Mar 07 Javascript
浅谈vue.js导入css库(elementUi)的方法
Mar 09 Javascript
Node.js 使用jade模板引擎的示例
May 11 Javascript
vue和webpack打包项目相对路径修改的方法
Jun 15 Javascript
在Vue.js中使用TypeScript的方法
Mar 19 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
Aug 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
CodeIgniter框架数据库事务处理的设计缺陷和解决方案
2014/07/25 PHP
php封装的连接Mysql类及用法分析
2015/12/10 PHP
PHP+HTML+JavaScript+Css实现简单爬虫开发
2016/03/28 PHP
PHP实现的线索二叉树及二叉树遍历方法详解
2016/04/25 PHP
PHP中的print_r 与 var_dump 输出数组
2016/06/13 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
javascript 命名空间以提高代码重用性
2008/11/13 Javascript
js变换显示图片的实例
2013/04/16 Javascript
JavaScript数组前面插入元素的方法
2015/04/06 Javascript
JQuery实现网页右侧随动广告特效
2016/01/17 Javascript
js滑动提示效果代码分享
2016/03/10 Javascript
原生JS实现图片轮播与淡入效果的简单实例
2016/08/21 Javascript
ajax分页效果(bootstrap模态框)
2017/01/23 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
2017/05/30 Javascript
vue中七牛插件使用的实例代码
2017/07/28 Javascript
Angular实现双向折叠列表组件的示例代码
2017/11/21 Javascript
es6函数之尾递归用法实例分析
2020/04/25 Javascript
js+audio实现音乐播放器
2020/09/13 Javascript
Python算法应用实战之队列详解
2017/02/04 Python
浅谈pycharm使用及设置方法
2019/09/09 Python
基于python的列表list和集合set操作
2019/11/24 Python
解决django框架model中外键不落实到数据库问题
2020/05/20 Python
python3 简单实现组合设计模式
2020/07/02 Python
基于Python爬取搜狐证券股票过程解析
2020/11/18 Python
运动鞋、街头服装、手表和手袋的实时市场:StockX
2020/11/25 全球购物
员工拾金不昧表扬信
2014/01/09 职场文书
团队激励口号
2014/06/06 职场文书
护理专业毕业生自荐信
2014/06/15 职场文书
股东授权委托书范本
2014/09/13 职场文书
企业与个人合作经营协议书
2014/11/01 职场文书
银行催款通知书
2015/04/17 职场文书
政协常委会议主持词
2015/07/03 职场文书
评奖评优个人先进事迹材料
2015/11/04 职场文书
企业廉洁教育心得体会
2016/01/20 职场文书
python引入其他文件夹下的py文件具体方法
2021/05/23 Python
使用refresh_token实现无感刷新页面
2022/04/26 Javascript