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 相关文章推荐
让innerHTML的脚本也可以运行起来
Jul 01 Javascript
jquery 获取json数据实现代码
Apr 27 Javascript
对象特征检测法判断浏览器对javascript对象的支持
Jul 25 Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
Sep 04 Javascript
javascript中的 object 和 function小结
Aug 14 Javascript
Bootstrap 模态框(Modal)插件代码解析
Dec 21 Javascript
Vue数据驱动模拟实现1
Jan 11 Javascript
angular directive的简单使用总结
May 24 Javascript
Angular.js实现动态加载组件详解
May 28 Javascript
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
Vue不能观察到数组length的变化
Jun 08 Javascript
layui扩展上传组件模拟进度条的方法
Sep 23 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
一个MYSQL操作类
2006/11/16 PHP
php中支持多种编码的中文字符串截取函数!
2007/03/20 PHP
非集成环境的php运行环境(Apache配置、Mysql)搭建安装图文教程
2016/04/12 PHP
laravel手动创建数组分页的实现代码
2018/06/07 PHP
PHP rsa加密解密算法原理解析
2020/12/09 PHP
JS类中定义原型方法的两种实现的区别
2007/03/08 Javascript
Prototype源码浅析 String部分(四)之补充
2012/01/16 Javascript
关于使用 jBox 对话框的提交不能弹出问题解决方法
2012/11/07 Javascript
jquery获取tagName再进行判断
2014/05/29 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
2014/06/16 Javascript
如何在JS中实现相互转换XML和JSON
2016/07/19 Javascript
jQuery事件处理的特征(事件命名机制)
2016/08/23 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
2016/12/20 Javascript
移动端界面的适配
2017/01/11 Javascript
JS和canvas实现俄罗斯方块
2017/03/14 Javascript
详解vue 配合vue-resource调用接口获取数据
2017/06/22 Javascript
详解Node.js中的Async和Await函数
2018/02/22 Javascript
实例解析Vue.js下载方式及基本概念
2018/05/11 Javascript
微信小程序使用swiper组件实现类3D轮播图
2018/08/29 Javascript
javascript实现前端分页效果
2020/06/24 Javascript
jquery插件实现轮播图效果
2020/10/19 jQuery
EXTJS7实现点击拖拉选择文本
2020/12/17 Javascript
Python获取邮件地址的方法
2015/07/10 Python
对Python 内建函数和保留字详解
2018/10/15 Python
pygame游戏之旅 python和pygame安装教程
2018/11/20 Python
解决pycharm py文件运行后停止按钮变成了灰色的问题
2018/11/29 Python
python 实现图片修复(可用于去水印)
2020/11/19 Python
国外平面设计素材网站:The Hungry JPEG
2017/03/28 全球购物
英国森林假期:Forest Holidays
2021/01/01 全球购物
项目合作计划书
2014/01/09 职场文书
中学生个人自我评价
2014/02/06 职场文书
2014预备党员批评与自我批评思想汇报
2014/09/20 职场文书
死者家属慰问信
2015/03/24 职场文书
反腐倡廉影片观后感
2015/06/08 职场文书
2016开学第一课心得体会
2016/01/23 职场文书
浅谈什么是SpringBoot异常处理自动配置的原理
2021/06/21 Java/Android