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中的prototype使用说明
Apr 13 Javascript
jQuery.fn和jQuery.prototype区别介绍
Oct 05 Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
Feb 28 Javascript
JS数组(Array)处理函数整理
Dec 07 Javascript
Lua表达式和控制结构学习笔记
Dec 15 Javascript
jquery实现相册一下滑动两次的方法
Feb 09 Javascript
jquery获取easyui日期控件的值实现方法
Nov 09 Javascript
Javascript面试经典套路reduce函数查重
Mar 23 Javascript
BootstrapTable加载按钮功能实例代码详解
Sep 22 Javascript
JS拖拽排序插件Sortable.js用法实例分析
Feb 20 Javascript
解决layer 动态加载select 失效的问题
Sep 18 Javascript
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
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中将地址生成迅雷快车旋风链接的代码[测试通过]
2011/04/20 PHP
探讨:如何使用PHP实现计算两个日期间隔的年、月、周、日数
2013/06/13 PHP
PHP 文件编程综合案例-文件上传的实现
2013/07/03 PHP
PHP获取文件的MD5值并判断是否被修改的例子
2014/06/19 PHP
php中addslashes函数与sql防注入
2014/11/17 PHP
php+jQuery+Ajax实现点赞效果的方法(附源码下载)
2020/07/21 PHP
thinkphp中AJAX返回ajaxReturn()方法分析
2016/12/06 PHP
php分享朋友圈的实现代码
2019/02/18 PHP
jQuery-ui中自动完成实现方法
2010/06/10 Javascript
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
2012/12/12 Javascript
js清除input中type等于file的值域(示例代码)
2013/12/24 Javascript
离开当前页面前使用js判断条件提示是否要离开页面
2014/05/02 Javascript
两种不同的方法实现js对checkbox进行全选和反选
2014/05/13 Javascript
JavaScript实现的一个倒计时的类
2015/03/12 Javascript
jQuery通过Ajax返回JSON数据
2015/04/28 Javascript
javascript实现2016新年版日历
2016/01/25 Javascript
js实现下拉框效果(select)
2017/03/28 Javascript
windows下更新npm和node的方法
2017/11/30 Javascript
Vue实现一个图片懒加载插件
2019/03/11 Javascript
Bootstrap实现模态框效果
2019/09/30 Javascript
ES6新增的数组知识实例小结
2020/05/23 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
2020/06/19 Javascript
浅谈Vue static 静态资源路径 和 style问题
2020/11/07 Javascript
Python sys.path详细介绍
2013/10/17 Python
浅析Python中的多重继承
2015/04/28 Python
浅析python打包工具distutils、setuptools
2018/04/20 Python
使用Python进行QQ批量登录的实例代码
2018/06/11 Python
Python求区间正整数内所有素数之和的方法实例
2020/10/13 Python
CSS类名支持中文命名的示例
2014/04/04 HTML / CSS
html5-websocket基于远程方法调用的数据交互实现
2012/12/04 HTML / CSS
GNC健安喜官方海外旗舰店:美国著名保健品牌
2017/01/04 全球购物
阿玛尼意大利官网:Armani意大利
2018/10/30 全球购物
幼儿教师个人求职信范文
2013/09/21 职场文书
宾馆客房管理制度
2015/08/06 职场文书
2019关于实习生工作安排及待遇的管理方案!
2019/07/16 职场文书
零基础学java之方法的定义与调用详解
2022/04/10 Java/Android