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 相关文章推荐
JS 树形递归实例代码
May 18 Javascript
IE中鼠标经过option触发mouseout的解决方法
Jan 29 Javascript
jquery中animate的stop()方法作用实例分析
Jan 30 Javascript
使用JavaScript脚本判断页面是否在微信中被打开
Mar 06 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
Nov 01 Javascript
JS设置CSS样式的方式汇总
Jan 21 Javascript
动手写一个angular版本的Message组件的方法
Dec 16 Javascript
vue.js计算属性computed用法实例分析
Jul 06 Javascript
vue两组件间值传递 $router.push实现方法
May 15 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
Nov 07 Javascript
浅谈TypeScript的类型保护机制
Feb 23 Javascript
vue3不同环境下实现配置代理
May 25 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
采集邮箱的php代码(抓取网页中的邮箱地址)
2012/07/17 PHP
实测在class的function中include的文件中非php的global全局环境
2013/07/15 PHP
php使用反射插入对象示例分享
2014/03/11 PHP
thinkphp3.2.0 setInc方法 源码全面解析
2018/01/29 PHP
jQuery回车实现登录简单实现
2013/08/20 Javascript
浅析用prototype定义自己的方法
2013/11/14 Javascript
jquery实现的省市区三级联动
2015/04/02 Javascript
JQuery实现DIV其他动画效果的简单实例
2016/09/18 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
2016/12/14 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
2017/09/21 Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
2017/09/30 Javascript
微信小程序实现留言板
2018/10/31 Javascript
[04:45]上海特级锦标赛主赛事第三日TOP10
2016/03/05 DOTA
Python中的元类编程入门指引
2015/04/15 Python
在Python中处理字符串之ljust()方法的使用简介
2015/05/19 Python
举例讲解Python面向对象编程中类的继承
2016/06/17 Python
scrapy spider的几种爬取方式实例代码
2018/01/25 Python
NumPy 如何生成多维数组的方法
2018/02/05 Python
python存储16bit和32bit图像的实例
2018/12/05 Python
Python依赖包整体迁移方法详解
2019/08/15 Python
Python3 requests文件下载 期间显示文件信息和下载进度代码实例
2019/08/16 Python
如何通过python实现IOU计算代码实例
2020/11/02 Python
基于css3 animate制作绚丽的动画效果
2015/11/24 HTML / CSS
纯净、自信、100%的羊绒服装:360Cashmere
2021/02/20 全球购物
项目投资建议书
2014/05/16 职场文书
文员求职信
2014/07/15 职场文书
四风自我剖析材料
2014/09/30 职场文书
2014年文艺部工作总结
2014/11/17 职场文书
2014年客服工作总结与计划
2014/12/09 职场文书
毕业生自荐材料范文
2014/12/30 职场文书
考试作弊检讨书范文
2015/01/27 职场文书
党员公开承诺书(2016最新版)
2016/03/24 职场文书
python基础之停用词过滤详解
2021/04/21 Python
python字符串的多行输出的实例详解
2021/06/08 Python
详解解Django 多对多表关系的三种创建方式
2021/08/23 Python
《黑岩★★射手 DAWN FALL》BD发售宣传CM公开
2022/04/04 日漫