这是一个最简单的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>

angularjs中的数据绑定的更多相关文章

  1. AngularJS入门之数据绑定

    本篇我们看一下AngularJS中的数据绑定.虽然我们直到这篇才提到数据绑定,但事实上在前面几篇中我们已经非常熟练的运用AngularJS的数据绑定功能了! ngBind(ng-bind)/ {{ e ...

  2. angularJs的一次性数据绑定：双冒号::

    angularJs 中双冒号 ::来实现一次性数据绑定. 原文: https://blog.csdn.net/qianxing111/article/details/79971544 -------- ...

  3. Angularjs进阶笔记（2）-自定义指令中的数据绑定

    有关自定义指令的scope参数,网上很多文章都在讲这3种绑定方式实现的效果是什么,但几乎没有人讲到底怎么使用,本篇希望聊聊到底怎么用这个话题. 一. 自定义指令 自定义指令,是Angularjs用来实 ...

  4. AngularJS中的指令全面解析（转载）

    说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的地方.双向数据绑定呢,感觉没什么好说的,那么今天我们就来简单的讨论下AngularJ ...

  5. angularJS中directive与controller之间的通信

    当我们在angularJS中自定义了directive之后需要和controller进行通讯的时候,是怎么样进行通讯呢? 这里介绍3种angular自定义directive与controller通信的 ...

  6. AngularJS中的指令

    欢迎大家讨论与指导 : )  前言 当AngularJS中的内置指令不能满足我们的需求,或者当我们需要创建一个能够用于多个AngularJS程序的自包含的功能单元时,我们应该创建自定义指令来满足需求. ...

  7. AngularJS学习--- AngularJS中的模板template和迭代器过滤filter step2 step3

    1.AngularJS 模板---step2: mvc(Model-View-Controller)模式在后端用的比较多,在前端也是一样的常用; 在AngularJS中,一个视图是模型通过HTML模板 ...

  8. angularJS中的$apply(),$digest(),$watch()

    $apply()和$digest()在AngularJS中是两个核心概念,但是有时候它们又让人困惑.而为了了解AngularJS的工作方式,首先需要了解$apply()和$digest()是如何工作的 ...

  9. AngularJs中的directives（指令part1）

    一.指令的职责   指令的职责是修改DOM结构,并将作用域和DOM连接起来.即指令既要操作DOM,将作用域内的数据绑定到DOM节点上,又要为DOM绑定事件调用作用域内的对应的方法. 二.创建自定义指令 ...

随机推荐

  1. 51Nod1140 矩阵相乘的结果

    随机化算法. A*B==C那么X*A*B==X*C 降到了n*n复杂度. 多次随机X判断即可. By:大奕哥 #include<bits/stdc++.h> using namespace ...

  2. [BZOJ3514]CodeChef MARCH14 GERALD07加强版(LCT+主席树)

    3514: Codechef MARCH14 GERALD07加强版 Time Limit: 60 Sec  Memory Limit: 256 MBSubmit: 2177  Solved: 834 ...

  3. 20162327WJH 实验三 《敏捷开发与XP实践》 实验报告

    20162327WJH 实验三 <敏捷开发与XP实践> 实验报告 一.实验内容 1.XP基础 2.XP核心实践 3.相关工具 二.实验要求 1.没有Linux基础的同学建议先学习<L ...

  4. 20162328WJH实验五网络编程与安全实验报告

    20162328WJH实验五网络编程与安全实验报告 一.实验五 网络编程与安全-1 结对实现中缀表达式转后缀表达式的功能 MyBC.java 结对实现从上面功能中获取的表达式中实现后缀表达式求值的功能 ...

  5. String是最基本的数据类型吗？

    不是, 基本数据类型包括:byte,short,int,long,float,double,boolean,char. 而String是类代表字符串,属于引用类型,所谓引用类型包括:类,接口,数组.. ...

  6. bzoj 2038 小Z的袜子 莫队算法

    题意 给你一个长度序列,有多组询问,每次询问(l,r)任选两个数相同的概率.n <= 50000,数小于等于n. 莫队算法裸题. 莫队算法:将序列分为根号n段,将询问排序,以L所在的块为第一关键 ...

  7. 2015 UESTC 搜索专题M题 Palindromic String 马拉车算法

    Palindromic String Time Limit: 20 Sec  Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/contest/s ...

  8. HashSet,TreeSet和LinkedHashSet

    Set接口 Set不允许包含相同的元素,如果试图把两个相同元素加入同一个集合中,add方法返回false. Set判断两个对象相同不是使用==运算符,而是根据equals方法.也就是说,只要两个对象用 ...

  9. OpenCV2马拉松第12圈——直方图比較

    收入囊中 使用4种不同的方法进行直方图比較 葵花宝典 要比較两个直方图, 首先必需要选择一个衡量直方图相似度的对照标准.也就是先说明要在哪个方面做对照. 我们能够想出非常多办法,OpenCV採用了下面 ...

  10. Linux C/C++开发工具

    1. vim + ctags + taglist + cscope + cppcomplete + global 2.emacs+插件 可以查看 http://blog.163.com/yu_hong ...