Angularjs中数据绑定的实例详解


Posted in Javascript onAugust 25, 2017

Angularjs中数据绑定的实例详解

这是一个最简单的angularjs的例子,关于数据绑定的,大家可以执行一下,看看效果

<html ng-app>
<head>
<title>angularjs-include</title>
<script type="text/javascript" src="js/angular/angular.min.js"></script>
</head>
<body>
<input type="text" ng-model="name" value="" /><br />
<div>Hello,{{name}}</div>
</body>
</html>

关于数据双向绑定,有时候不需要实时同步,比如当输入框失去焦点的时候才去更新div里面的内容,这里可以用上ng-model-options属性来解决,将上面的代码稍做修改:

<html ng-app>
<head>
<title>angularjs-include</title>
<script type="text/javascript" src="js/angular/angular.min.js"></script>
</head>
<body>
<input type="text" ng-model="name" value="" ng-model-options="{ updateOn: 'blur' }" /><br />
<div>Hello,{{name}}</div>
</body>
</html>

 或者改为每隔1秒来更新:

<html ng-app>
<head>
<title>angularjs-include</title>
<script type="text/javascript" src="js/angular/angular.min.js"></script>
</head>
<body>
<input type="text" ng-model="name" value="" ng-model-options="{ debounce: {default:1000} }" /><br />
<div>Hello,{{name}}</div>
</body>
</html>

如有疑问请留言或者到本站社区交流讨论,大家共同进步,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
jQuery插件 tabBox实现代码
Feb 09 Javascript
Javascript Math ceil()、floor()、round()三个函数的区别
Mar 09 Javascript
IE6下javasc#ipt:void(0) 无效的解决方法
Dec 23 Javascript
11种ASP连接数据库的方法
Sep 18 Javascript
原生js和jQuery实现淡入淡出轮播效果
Dec 25 Javascript
js+css绘制颜色动态变化的圈中圈效果
Jan 27 Javascript
jquery获取复选框的值的简单实例
May 26 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
Sep 05 Javascript
Vue计算属性的使用
Aug 04 Javascript
可能被忽略的一些JavaScript数组方法细节
Feb 28 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
Oct 26 Javascript
Vue 简单实现前端权限控制的示例
Dec 25 Vue.js
vue2利用Bus.js如何实现非父子组件通信详解
Aug 25 #Javascript
JavaScript中防止微信浏览器被整体拖动的方法
Aug 25 #Javascript
在Js页面通过POST传递参数跳转到新页面详解
Aug 25 #Javascript
Vue上传组件vue Simple Uploader的用法示例
Aug 25 #Javascript
DVA框架统一处理所有页面的loading状态
Aug 25 #Javascript
基于JavaScript实现评论框展开和隐藏功能
Aug 25 #Javascript
js求数组中全部数字可拼接出的最大整数示例代码
Aug 25 #Javascript
You might like
获得Google PR值的PHP代码
2007/01/28 PHP
Drupal7 form表单二次开发要点与实例
2014/03/02 PHP
关于php支持分块与断点续传文件下载功能代码
2014/05/09 PHP
跨浏览器PHP下载文件名中的中文乱码问题解决方法
2015/03/05 PHP
基于PHP实现商品成交时发送短信功能
2016/05/11 PHP
javascript学习随笔(使用window和frame)的技巧
2007/03/08 Javascript
document.getElementById方法在Firefox与IE中的区别
2010/05/18 Javascript
jquery 的 $(&quot;#id&quot;).html() 无内容的解决方法
2010/06/07 Javascript
js获取上传文件大小示例代码
2014/04/10 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
2015/03/10 Javascript
javascript实现随时变化着的背景颜色
2015/04/02 Javascript
jquery实现简单的无缝滚动
2015/04/15 Javascript
jQuery实现购物车表单自动结算效果实例
2015/08/10 Javascript
jQuery插件ajaxFileUpload异步上传文件
2016/10/19 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
2016/11/07 Javascript
走进javascript——不起眼的基础,值和分号
2017/02/24 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
2017/03/01 Javascript
解决select2在bootstrap modal中不能正常使用的问题
2018/08/09 Javascript
vue插槽slot的理解和使用方法
2019/04/03 Javascript
微信小程序点击保存图片到本机功能
2019/12/13 Javascript
[41:56]Spirit vs Liquid Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
python之django母板页面的使用
2018/07/03 Python
利用Python实现原创工具的Logo与Help
2018/12/03 Python
对python requests发送json格式数据的实例详解
2018/12/19 Python
台湾东南旅游社网站:东南旅游
2019/02/11 全球购物
澳大利亚买卖正宗二手奢侈品交易平台:Luxe.It.Fwd
2019/10/16 全球购物
MIXIT官网:俄罗斯最大的化妆品公司之一
2020/01/25 全球购物
宝信软件JAVA工程师面试经历
2012/08/19 面试题
房地产活动策划方案
2014/05/14 职场文书
部门活动策划方案
2014/08/16 职场文书
计划生育证明书写要求
2014/09/17 职场文书
2016教师廉洁从教心得体会
2016/01/13 职场文书
制定企业培训计划的五大要点!
2019/07/10 职场文书
深入理解python协程
2021/06/15 Python
Win10 最新稳定版本 21H2开始推送
2022/04/19 数码科技