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 相关文章推荐
javascript Excel操作知识点
Apr 24 Javascript
JavaScript表达式:URL 协议介绍
Mar 10 Javascript
js输入框邮箱自动提示功能代码实现
Dec 10 Javascript
Javascript浅谈之引用类型
Dec 18 Javascript
javascript ajax的5种状态介绍
Aug 18 Javascript
jQuery实现图像旋转动画效果
May 29 Javascript
详解webpack的配置文件entry与output
Aug 21 Javascript
详解ES6语法之可迭代协议和迭代器协议
Jan 13 Javascript
vue通过style或者class改变样式的实例代码
Oct 30 Javascript
实例讲解JS中pop使用方法
Jan 27 Javascript
每天学点Vue源码之vm.$mount挂载函数
Mar 11 Javascript
javascript条件式访问属性和箭头函数介绍
Nov 17 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
PHP 可阅读随机字符串代码
2010/05/26 PHP
解决php接收shell返回的结果中文乱码问题
2014/01/23 PHP
php.ini中的request_order推荐设置
2015/05/10 PHP
百万级别知乎用户数据抓取与分析之PHP开发
2015/09/28 PHP
PHP基于接口技术实现简单的多态应用完整实例
2017/04/26 PHP
Laravel中前端js上传图片到七牛云的示例代码
2017/09/04 PHP
关于文本框的一些限制控制总结~~
2010/04/15 Javascript
你需要知道的10个最佳javascript开发实践小结
2012/04/15 Javascript
推荐40款强大的 jQuery 导航插件和教程(上篇)
2012/09/14 Javascript
javascript中数组的冒泡排序使用示例
2013/12/18 Javascript
JavaScript判断textarea值是否为空并给出相应提示
2014/09/04 Javascript
JavaScript常用脚本汇总(一)
2015/03/04 Javascript
JavaScript获得表单target属性的方法
2015/04/02 Javascript
使用JQuery选择HTML遍历函数的方法
2016/09/17 Javascript
微信小程序 下拉菜单的实现
2017/04/06 Javascript
使用js获取伪元素的content实例
2017/10/24 Javascript
原生JS实现 MUI导航栏透明渐变效果
2017/11/07 Javascript
实现jquery放大镜的两种方法
2018/02/22 jQuery
JavaScript遍历数组的方法代码实例
2020/01/14 Javascript
[20:30]职业巡回赛回顾
2018/08/09 DOTA
web.py在模板中输出美元符号的方法
2014/08/26 Python
Python连接数据库学习之DB-API详解
2017/02/07 Python
浅谈Python处理PDF的方法
2017/11/10 Python
使用Python读取二进制文件的实例讲解
2018/07/09 Python
Win8.1下安装Python3.6提示0x80240017错误的解决方法
2018/07/31 Python
Python设计模式之桥接模式原理与用法实例分析
2019/01/10 Python
Python socket实现多对多全双工通信的方法
2019/02/13 Python
18个Python脚本可加速你的编码速度(提示和技巧)
2019/10/17 Python
Python偏函数实现原理及应用
2020/11/20 Python
Smashbox英国官网:美国知名彩妆品牌
2017/11/13 全球购物
德国内衣、泳装和睡衣网上商店:Bigsize Dessous
2018/07/09 全球购物
水产养殖学应届生求职信
2013/09/29 职场文书
大学生军训自我评价分享
2013/11/09 职场文书
寒暑假实习证明书模板
2014/11/29 职场文书
2015入党自荐书范文
2015/03/05 职场文书
django中websocket的具体使用
2022/01/22 Python