这是一个最简单的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. C和指针之学习笔记（4）

    第9章 字符串 字符串的输入与输出 int  ch;  char strings[80];  FILE *input; (1)scanf(“%c”,&ch);   printf(“%c \n” ...

  2. 【BZOJ 3242】 （环套树、线段树+树形DP？）

    3242: [Noi2013]快餐店 Time Limit: 20 Sec  Memory Limit: 512 MBSubmit: 728  Solved: 390 Description 小T打算 ...

  3. [BZOJ4784][ZJOI2017]仙人掌(树形DP)

    4784: [Zjoi2017]仙人掌 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 312  Solved: 181[Submit][Status] ...

  4. NYOJ 298 点的变换 矩阵乘法

    http://acm.nyist.net/JudgeOnline/problem.php?pid=298 最好还是自己手推一下矩阵式子..不算太难..但是有一些小知识.... 首先当然是矩阵的细节.. ...

  5. django基础入门

    1. http协议 1.1 请求协议 请求协议格式: 请求首行: // 请求方式 请求路径 协议和版本,例如:GET /index.html HTTP/1.1 请求头信息: // 请求头名称:请求头内 ...

  6. [转]Android Studio开发入门-引用jar及so文件

    注意: 1.jar包在app的libs目录 2.so文件放在src/main”目录中名为“jniLibs”的目录 一.引用jar文件    1.将jar文件复制.粘贴到app的libs目录中:    ...

  7. 2015 UESTC 数据结构专题N题 秋实大哥搞算数　表达式求值/栈

    秋实大哥搞算数 Time Limit: 1 Sec  Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/problem/show/1074 Des ...

  8. 我的sourceinsight的配置

    下面是我的sourceinsight的配置,点击下面的链接,下载*.em文件,将他们添加到Base工程,设置相应的快捷键即可,或者导入下载的配置文件. http://pan.baidu.com/s/1 ...

  9. [翻译] Blocks and Variables

    Blocks and Variables https://developer.apple.com/library/ios/documentation/cocoa/conceptual/Blocks/A ...

  10. iOS设计模式:静态工厂相关

    工厂方法模式 定义创建对象的接口,让子类决定实例化哪一个类,工厂方法使得一个类的实例化延迟到其子类. *最初的定义出现于<设计模式>(Addison-Wesley,1994) 注意:我讲解 ...