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 相关文章推荐
解决FLASH需要点击激活的代码
Dec 20 Javascript
java script编程起步(第三课)
Jan 10 Javascript
JS获取并操作iframe中元素的方法
Mar 21 Javascript
document.documentElement和document.body区别介绍
Sep 16 Javascript
JavaScript设置首页和收藏页面的小例子
Nov 11 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
Jan 15 Javascript
jquery中object对象循环遍历的方法
Dec 18 Javascript
javascript中的try catch异常捕获机制用法分析
Dec 14 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
Jan 12 Javascript
jQuery 改变P标签文本值方法
Feb 24 jQuery
微信小程序在地图选择地址并返回经纬度简单示例
Dec 03 Javascript
微信小程序实现弹框效果
May 26 Javascript
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
thinkphp中session和cookie无效的解决方法
2014/12/19 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
用JavaScript显示随机图像或引用
2009/04/21 Javascript
js函数获取html中className所在的内容并去除标签
2013/09/08 Javascript
鼠标滚轴控制文本框值的JS代码
2013/11/19 Javascript
常用的Javascript数据验证插件
2015/08/04 Javascript
jQuery实现右侧抽屉式在线客服功能
2017/12/25 jQuery
详解React开发必不可少的eslint配置
2018/02/05 Javascript
vue webpack开发访问后台接口全局配置的方法
2018/09/18 Javascript
Angular8路由守卫原理和使用方法
2019/08/29 Javascript
JS插入排序简单理解与实现方法分析
2019/11/25 Javascript
JavaScript实现猜数字游戏
2020/05/20 Javascript
JavaScript图片旋转效果实现方法详解
2020/06/28 Javascript
python实现360的字符显示界面
2014/02/21 Python
使用Python监控文件内容变化代码实例
2018/06/04 Python
pandas Dataframe行列读取的实例
2018/06/08 Python
Python+opencv 实现图片文字的分割的方法示例
2019/07/04 Python
Django错误:TypeError at / 'bool' object is not callable解决
2019/08/16 Python
妙用itchat! python实现久坐提醒功能
2019/11/25 Python
Pandas实现dataframe和np.array的相互转换
2019/11/30 Python
解决Python使用列表副本的问题
2019/12/19 Python
将python文件打包exe独立运行程序方法详解
2020/02/12 Python
基于 Python 实践感知器分类算法
2021/01/07 Python
趣味活动策划方案
2014/02/08 职场文书
汉语言文学职业规划
2014/02/14 职场文书
教师校本培训方案
2014/02/26 职场文书
购房协议书
2014/04/11 职场文书
放飞梦想演讲稿200字
2014/08/26 职场文书
商场收银员岗位职责
2015/04/07 职场文书
小学教学工作总结2015
2015/05/13 职场文书
法制教育主题班会
2015/08/13 职场文书
导游词之长城八达岭
2019/09/24 职场文书
纯CSS实现hover图片pop-out弹出效果的实例代码
2021/04/16 HTML / CSS
详解MySQL事务的隔离级别与MVCC
2021/04/22 MySQL
《总之就是很可爱》新作短篇动画《总之就是很可爱~制服~》将于2022年夏天播出
2022/04/07 日漫
Python中的matplotlib绘制百分比堆叠柱状图,并为每一个类别设置不同的填充图案
2022/04/20 Python