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和json从后台获得数据集的代码
Nov 07 Javascript
用Javascript评估用户输入密码的强度实现代码
Nov 30 Javascript
input:checkbox多选框实现单选效果跟radio一样
Jun 16 Javascript
JS新包管理工具yarn和npm的对比与使用入门
Dec 09 Javascript
jquery实现输入框实时输入触发事件代码
Dec 21 Javascript
浅谈Vue.js
Mar 02 Javascript
基于JavaScript实现的希尔排序算法分析
Apr 14 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
Aug 20 Javascript
vue中接口域名配置为全局变量的实现方法
Sep 20 Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
Oct 15 Javascript
javascript利用键盘控制小方块的移动
Apr 20 Javascript
原生JS实现京东查看商品点击放大
Dec 21 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
雄兵连三大错觉:凯莎没了,凉冰阵亡了,华烨觉得自己又行了
2020/04/09 国漫
PHP获取短链接跳转后的真实地址和响应头信息的方法
2014/07/25 PHP
Thinkphp单字母函数使用指南
2016/05/08 PHP
PHP中for循环与foreach的区别
2017/03/06 PHP
不安全的常用的js写法
2009/09/15 Javascript
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
2010/03/04 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
2016/08/25 Javascript
nodejs multer实现文件上传与下载
2017/05/10 NodeJs
JS使用tofixed与round处理数据四舍五入的区别
2017/10/25 Javascript
layui监听工具栏的实例(操作列表按钮)
2019/09/10 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
2019/11/13 Javascript
Python实现将n个点均匀地分布在球面上的方法
2015/03/12 Python
用Python编写一个简单的FUSE文件系统的教程
2015/04/02 Python
python MySQLdb Windows下安装教程及问题解决方法
2015/05/09 Python
python脚本实现xls(xlsx)转成csv
2016/04/10 Python
轻松掌握python设计模式之访问者模式
2016/11/18 Python
Python 遍历子文件和所有子文件夹的代码实例
2016/12/21 Python
python 将列表中的字符串连接成一个长路径的方法
2018/10/23 Python
使用pandas读取文件的实现
2019/07/31 Python
python 使用socket传输图片视频等文件的实现方式
2019/08/07 Python
python如何使用socketserver模块实现并发聊天
2019/12/14 Python
Python多线程thread及模块使用实例
2020/04/28 Python
3分钟看懂Python后端必须知道的Django的信号机制
2020/07/26 Python
Python生成pdf目录书签的实例方法
2020/10/29 Python
python 使用openpyxl读取excel数据
2021/02/18 Python
英国时尚家具、家居饰品及礼品商店:Graham & Green
2016/09/15 全球购物
Urban Outfitters德国官网:美国跨国生活方式零售公司
2018/05/21 全球购物
欧姆龙医疗保健与医疗产品:Omron Healthcare
2020/02/10 全球购物
命名空间(namespace)和程序集(Assembly)有什么区别
2015/09/25 面试题
彩妆大赛策划方案
2014/05/13 职场文书
群众路线教育实践活动学习笔记内容
2014/11/06 职场文书
公司财务部岗位职责
2015/04/14 职场文书
三十年同学聚会致辞
2015/07/28 职场文书
大学生心理健康教育心得体会
2016/01/12 职场文书
导游词之金鞭溪风景区
2019/09/12 职场文书
SQL IDENTITY_INSERT作用案例详解
2021/08/23 MySQL