AngularJS单选框及多选框实现双向动态绑定


Posted in Javascript onJanuary 13, 2016

在AngularJS中提及双向数据绑定,大家肯定会想到ng-model指令。

一、ng-model

ng-model指令用来将input、select、textarea或自定义表单控件同包含它们的作用域中的属性进行绑定。它将当前作用域中运算表达式的值同给定的元素进行绑定。如果属性不存在,它会隐式创建并将其添加到当前作用域中。
始终用ng-model来绑定scope上一个数据模型内的属性,而不是scope上的属性,这可以避免在作用域或后代作用域中发生属性覆盖!

<input type="text" ng-model="modelName.somePrototype" />

二、type=”radio”

通过 value 属性指定选中状态下对应的值,并通过 ng-model 将单选框与 $scope 中的属性对应,便实现了 type=”radio” 时的双向动态绑定。

<input type="radio" name="sex" value="male" ng-model="person.sex" />男
<input type="radio" name="sex" value="female" ng-model="person.sex" />女

三、type=”checkbox”

通过AngularJS 的内置指令 ng-true-value 和 ng-false-value ,指定多选框在选中和未选中状态下对应的值,再通过ng-model 将其与 $scope 中的属性对应,便实现了type=”checkbox” 的双向动态绑定。

<input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="person.like.pingpong" />乒乓球
<input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="person.like.football" />足球
<input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="person.like.basketball" />篮球

四、完整示例

<html ng-app="myApp">
<head>
 <meta charset="UTF-8">
 <title>radio & checkbox</title>
 <script type="text/javascript" src="angular.js/1.4.4/angular.min.js"></script>
</head>
<body>
 <input type="radio" name="sex" value="male" ng-model="person.sex" />男
 <input type="radio" name="sex" value="female" ng-model="person.sex" />女
 <input type="text" ng-model="person.sex" />

 <input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="person.like.pingpong" />乒乓球
 <input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="person.like.football" />足球
 <input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="person.like.basketball" />篮球
 <span>{{ person.like.pingpong }} {{ person.like.football }} {{ person.like.basketball }} </span>
</body>
</html>

<script type="text/javascript">
 var app = angular.module('myApp', []);
 app.run(function($rootScope) {
  $rootScope.person = {
   sex: "female",
   like: {
    pingpong: true,
    football: true,
    basketball: false
   }
  };
 });
</script>

以上就是关于AngularJS单选框及多选框实现双向动态绑定的相关介绍,希望对大家的学习有所帮助。

Javascript 相关文章推荐
JS 去除Array中的null值示例代码
Nov 20 Javascript
JavaScript类型系统之基本数据类型与包装类型
Jan 06 Javascript
jQuery UI插件实现百度提词器效果
Nov 21 Javascript
Javascript Event(事件)的传播与冒泡
Jan 23 Javascript
原生js轮播特效
May 18 Javascript
在 Node.js 中使用原生 ES 模块方法解析
Sep 19 Javascript
PostgreSQL Node.js实现函数计算方法示例
Feb 12 Javascript
详解JavaScript作用域和作用域链
Mar 19 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
Apr 22 Javascript
js计算最大公约数和最小公倍数代码实例
Sep 11 Javascript
Vue退出登录时清空缓存的实现
Nov 12 Javascript
微信小程序swiper左右扩展各显示一半代码实例
Dec 05 Javascript
javascript中的作用域和闭包详解
Jan 13 #Javascript
JSON+Jquery省市区三级联动
Jan 13 #Javascript
Easyui form combobox省市区三级联动
Jan 13 #Javascript
轻松实现javascript图片轮播特效
Jan 13 #Javascript
简单的JS时钟实例讲解
Jan 13 #Javascript
基于jquery实现的仿优酷图片轮播特效代码
Jan 13 #Javascript
详解iframe与frame的区别
Jan 13 #Javascript
You might like
利用ajax和PHP实现简单的流程管理
2017/03/23 PHP
php时间戳转换代码详解
2019/08/04 PHP
解决在laravel中leftjoin带条件查询没有返回右表为NULL的问题
2019/10/15 PHP
js Dialog 实践分享
2012/10/22 Javascript
子页向父页传值示例
2013/11/27 Javascript
jquery阻止后续事件只执行第一个事件
2014/07/24 Javascript
Nodejs+express+html5 实现拖拽上传
2014/08/08 NodeJs
深入浅析AngularJS中的module(模块)
2016/01/04 Javascript
jQuery实现无限往下滚动效果代码
2016/04/16 Javascript
JS组件Bootstrap实现图片轮播效果
2016/05/16 Javascript
高效的jQuery代码编写技巧总结
2017/02/22 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
2017/03/29 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
2017/05/10 Javascript
React 源码中的依赖注入方法
2018/11/07 Javascript
JS根据json数组多个字段排序及json数组常用操作
2019/06/06 Javascript
解决layer.msg 不居中 ifram中的问题
2019/09/05 Javascript
在react项目中使用antd的form组件,动态设置input框的值
2020/10/24 Javascript
python删除过期文件的方法
2015/05/29 Python
Python实现句子翻译功能
2017/11/14 Python
使用apidocJs快速生成在线文档的实例讲解
2018/02/07 Python
Python使用MD5加密算法对字符串进行加密操作示例
2018/03/30 Python
python ddt数据驱动最简实例代码
2019/02/22 Python
踩坑:pytorch中eval模式下结果远差于train模式介绍
2020/06/23 Python
python中pathlib模块的基本用法与总结
2020/08/17 Python
Canvas环形饼图与手势控制的实现代码
2019/11/08 HTML / CSS
中国跨境在线时尚零售商:Bellelily
2018/04/06 全球购物
乌克兰数字设备、配件和智能技术的连锁商店:KTC
2020/08/18 全球购物
3个CCIE对一个工程师的面试题
2012/05/06 面试题
中专毕业自我鉴定
2013/10/16 职场文书
弘扬焦裕禄精神走群众路线思想汇报
2014/09/12 职场文书
小学中等生评语
2014/12/29 职场文书
小学班主任个人总结
2015/03/03 职场文书
求职自我评价范文
2015/03/09 职场文书
2015年感恩节演讲稿(优选篇)
2015/03/20 职场文书
创业的9条正确思考方式
2019/08/26 职场文书
vue3获取当前路由地址
2022/02/18 Vue.js