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 相关文章推荐
greybox——不开新窗口看新的网页
Feb 20 Javascript
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
Nov 12 Javascript
JS跨域代码片段
Aug 30 Javascript
通过js来制作复选框的全选和不选效果
May 22 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
Jan 28 Javascript
JSON与JS对象的区别与对比
Mar 01 Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
Jul 10 Javascript
详解react-webpack2-热模块替换[HMR]
Aug 03 Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
Jan 30 Javascript
JavaScript函数、闭包、原型、面向对象学习笔记
Sep 06 Javascript
vue2.0+vue-router构建一个简单的列表页的示例代码
Feb 13 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
Apr 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
PHP中使用file_get_contents post数据代码例子
2015/02/13 PHP
PHPStorm+XDebug进行调试图文教程
2016/06/13 PHP
PHP 将dataurl转成图片image方法总结
2016/10/14 PHP
jQuery(非HTML5)可编辑表格实现代码
2012/12/11 Javascript
使用typeof判断function是否存在于上下文
2014/08/14 Javascript
javascript定时器完整实例
2015/02/10 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
2016/05/03 Javascript
Js+Ajax,Get和Post在使用上的区别小结
2016/06/08 Javascript
AngularJS基础 ng-show 指令简单示例
2016/08/03 Javascript
jQuery自适应轮播图插件Swiper用法示例
2016/08/24 Javascript
ES6学习教程之Map的常用方法总结
2017/08/03 Javascript
Vue工程模板文件 webpack打包配置方法
2017/12/26 Javascript
解决Webpack 热部署检测不到文件变化的问题
2018/02/22 Javascript
你了解vue3.0响应式数据怎么实现吗
2019/06/07 Javascript
JS错误处理与调试操作实例分析
2020/04/13 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
2020/08/13 Javascript
使用TS来编写express服务器的方法步骤
2020/10/29 Javascript
JavaScript 判断浏览器是否是IE
2021/02/19 Javascript
python错误处理详解
2014/09/28 Python
Python验证企业工商注册码
2015/10/25 Python
Python文本统计功能之西游记用字统计操作示例
2018/05/07 Python
对python 自定义协议的方法详解
2019/02/13 Python
Django 反向生成url实例详解
2019/07/30 Python
numpy np.newaxis 的实用分享
2019/11/30 Python
Python3变量与基本数据类型用法实例分析
2020/02/14 Python
耐克美国官网:Nike.com
2016/08/01 全球购物
英国知名的皮手套品牌:Dents
2016/11/13 全球购物
explicit和implicit的含义
2012/11/15 面试题
暑期研修感言
2014/02/17 职场文书
团队经理竞聘书
2014/03/31 职场文书
大学生简历求职信
2014/06/24 职场文书
代收款委托书范本
2014/10/01 职场文书
2014年人民警察入党思想汇报
2014/10/12 职场文书
文明班级申报材料
2014/12/24 职场文书
社区活动总结
2015/02/04 职场文书
祝福语集锦:朋友新店开业祝福语
2019/12/10 职场文书