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 相关文章推荐
jquery中this的使用说明
Sep 06 Javascript
jQuery :nth-child前有无空格的区别分析
Jul 11 Javascript
JS中令人发指的valueOf方法介绍
Feb 22 Javascript
Javascript自定义排序 node运行 实例
Jun 05 Javascript
Jquery uploadify图片上传插件无法上传的解决方法
Dec 16 Javascript
在for循环中length值是否需要缓存
Jul 27 Javascript
js实现文字滚动效果
Mar 03 Javascript
BootStrap创建响应式导航条实例代码
May 31 Javascript
jQuery导航条固定定位效果实例代码
May 26 jQuery
babel之配置文件.babelrc入门详解
Feb 22 Javascript
Vue引入sass并配置全局变量的方法
Jun 27 Javascript
TypeScript类型声明书写详解
Aug 28 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+AJAX传送中文会导致乱码的问题的解决方法
2008/09/08 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
js和jquery批量绑定事件传参数一(新猪猪原创)
2010/06/23 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
2013/02/05 Javascript
JQuery筛选器全系列介绍
2013/08/27 Javascript
JavaScript实现将xml转换成html table表格的方法
2015/04/17 Javascript
用NODE.JS中的流编写工具是要注意的事项
2016/03/01 Javascript
jquery分隔Url的param方法(推荐)
2016/05/25 Javascript
jQuery实现右下角可缩放大小的层完整实例
2016/06/20 Javascript
浅谈js中的in-for循环
2016/06/28 Javascript
AngularJS入门教程之链接与图片模板详解
2016/08/19 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
2016/08/29 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
2018/07/03 Javascript
javascript中如何判断类型汇总
2019/05/14 Javascript
vue柱状进度条图像的完美实现方案
2019/08/26 Javascript
原生js+canvas实现下雪效果
2020/08/02 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
2020/08/11 Javascript
python统计cpu利用率的方法
2015/06/02 Python
Python自动化运维和部署项目工具Fabric使用实例
2016/09/18 Python
python常见排序算法基础教程
2017/04/13 Python
基于windows下pip安装python模块时报错总结
2018/06/12 Python
Django 中使用流响应处理视频的方法
2018/07/20 Python
简单谈谈python基本数据类型
2018/09/26 Python
对pytorch中的梯度更新方法详解
2019/08/20 Python
Python基于pandas绘制散点图矩阵代码实例
2020/06/04 Python
python 实现围棋游戏(纯tkinter gui)
2020/11/13 Python
CSS3 中的@keyframes介绍
2014/09/02 HTML / CSS
Android笔试题总结
2014/11/29 面试题
毕业学生推荐信
2013/12/01 职场文书
新郎父亲婚宴答谢词
2014/01/11 职场文书
文秘人员工作职责
2014/01/31 职场文书
公司授权委托书格式范文
2014/10/02 职场文书
合法的离婚协议书范本
2014/10/23 职场文书
导游词之井冈山
2019/11/20 职场文书
解决golang post文件时Content-Type出现的问题
2021/05/02 Golang
idea编译器vue缩进报错问题场景分析
2021/07/04 Vue.js