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 相关文章推荐
CSDN轮换广告图片轮换效果
Mar 27 Javascript
Document 对象的常用方法
Jul 31 Javascript
用Juery网页选项卡实现代码
Jun 13 Javascript
javascript日期计算实例分析
Jun 29 Javascript
基于jquery编写分页插件
Mar 07 Javascript
JQuery.validationEngine表单验证插件(推荐)
Dec 10 Javascript
微信小程序开发图片拖拽实例详解
May 05 Javascript
Javascript实现的StopWatch功能示例
Jun 13 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
Jan 11 Javascript
原生javascript实现连连看游戏
Jan 03 Javascript
Vue核心概念Action的总结
Jan 18 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 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
解析smarty模板中类似for的功能实现
2013/06/18 PHP
php实现快速对二维数组某一列进行组装的方法小结
2019/12/04 PHP
HTML5如何适配 iPhone IOS 底部黑条
2021/03/09 HTML / CSS
js中获取事件对象的方法小结
2011/03/13 Javascript
jQuery Tools tab使用介绍
2012/07/14 Javascript
利用NodeJS的子进程(child_process)调用系统命令的方法分享
2013/06/05 NodeJs
利用JavaScript检测CPU使用率自己写的
2014/03/22 Javascript
Angular Js文件上传之form-data
2015/08/28 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
2016/02/12 Javascript
js实现的下拉框二级联动效果
2016/04/30 Javascript
js读取json文件片段中的数据实例
2017/03/09 Javascript
用js屏蔽被http劫持的浮动广告实现方法
2017/08/10 Javascript
对于js垃圾回收机制的理解
2017/09/14 Javascript
JavaScript数组去重算法实例小结
2018/05/07 Javascript
javascript实现文本框标签验证的实例代码
2018/10/14 Javascript
react高阶组件添加和删除props
2019/04/26 Javascript
vue的注意规范之v-if 与 v-for 一起使用教程
2019/08/04 Javascript
JavaScript交换两个变量方法实例
2019/11/25 Javascript
浅谈webpack和webpack-cli模块源码分析
2020/01/19 Javascript
django实现登录时候输入密码错误5次锁定用户十分钟
2017/11/05 Python
Python3+PyInstall+Sciter解决报错缺少dll、html等文件问题
2019/07/15 Python
使用Python实现微信拍一拍功能的思路代码
2020/07/09 Python
python如何利用Mitmproxy抓包
2020/10/10 Python
详解CSS中iconfont的使用
2015/08/04 HTML / CSS
美国正宗设计师眼镜在线零售商:EYEZZ
2019/03/23 全球购物
迪拜领先运动补剂零售品牌中文站:Sporter商城
2019/08/20 全球购物
Booking.com德国:预订最好的酒店和住宿
2020/02/16 全球购物
历史专业个人求职信分享
2013/12/20 职场文书
自动化专业职业生涯规划书范文
2014/01/16 职场文书
退伍老兵事迹材料
2014/01/31 职场文书
毕业实习评语
2014/02/10 职场文书
土木工程师职业规划范文
2014/03/07 职场文书
《槐乡五月》教学反思
2014/04/25 职场文书
学习朴航瑛老师爱岗敬业先进事迹思想汇报
2014/09/17 职场文书
工作自我推荐信范文
2015/03/25 职场文书
2015年统战工作总结
2015/05/19 职场文书