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加密解密7种方法总结分析
Oct 07 Javascript
jQuery EasyUI API 中文文档 - EasyLoader 加载器
Sep 29 Javascript
JS Map 和 List 的简单实现代码
Jul 08 Javascript
JQuery结合CSS操作打印样式的方法
Dec 24 Javascript
js和jquery设置disabled属性为true使按钮失效
Aug 07 Javascript
js实现的倒计时按钮实例
Jun 24 Javascript
AngularJS内建服务$location及其功能详解
Jul 01 Javascript
AngularJs基于角色的前端访问控制的实现
Nov 07 Javascript
JavaScript之json_动力节点Java学院整理
Jun 29 Javascript
vue-cli中打包图片路径错误的解决方法
Oct 26 Javascript
vuejs实现折叠面板展开收缩动画效果
Sep 06 Javascript
vue实现图片预览组件封装与使用
Jul 13 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性能的原理介绍
2012/09/05 PHP
PHP的压缩函数实现:gzencode、gzdeflate和gzcompress的区别
2016/01/27 PHP
让getElementsByName适应IE和firefox的方法
2007/09/24 Javascript
Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
2008/09/26 Javascript
jquery利用ajax调用后台方法实例
2013/08/23 Javascript
深入理解javascript的执行顺序
2014/04/04 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
2016/01/26 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
2016/08/10 Javascript
详解jQuery简单的表格应用
2016/12/16 Javascript
vue源码入口文件分析(推荐)
2018/01/30 Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
2018/07/18 Javascript
vue模块拖拽实现示例代码
2019/03/09 Javascript
javascript实现简易聊天室
2019/07/12 Javascript
在vue和element-ui的table中实现分页复选功能
2019/12/04 Javascript
js get和post请求实现代码解析
2020/02/06 Javascript
Vue SSR 即时编译技术的实现
2020/05/06 Javascript
jQuery实时统计输入框字数及限制
2020/06/24 jQuery
JS遍历树层级关系实现原理解析
2020/08/31 Javascript
[01:02:18]VGJ.S vs infamous Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
python实现按任意键继续执行程序
2016/12/30 Python
python 实现12bit灰度图像映射到8bit显示的方法
2019/07/08 Python
Python3 chardet模块查看编码格式的例子
2019/08/14 Python
Python函数的定义方式与函数参数问题实例分析
2019/12/26 Python
python GUI库图形界面开发之PyQt5复选框控件QCheckBox详细使用方法与实例
2020/02/28 Python
3种适用于Python的疯狂秘密武器及原因解析
2020/04/29 Python
Python 3.9的到来到底是意味着什么
2020/10/14 Python
利用CSS3的flexbox实现水平垂直居中与三列等高布局
2016/09/12 HTML / CSS
党员干部三严三实心得体会
2014/10/13 职场文书
小学教育见习报告
2014/10/31 职场文书
个人先进材料范文
2014/12/30 职场文书
八一建军节慰问信
2015/02/14 职场文书
河童之夏观后感
2015/06/11 职场文书
超市员工管理制度
2015/08/06 职场文书
深入详解JS函数的柯里化
2021/06/09 Javascript
Django + Taro 前后端分离项目实现企业微信登录功能
2022/04/07 Python
Win11安全功能升级:内置防网络钓鱼功能
2022/04/08 数码科技