这是一个最简单的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. RxSwift 系列(三)

    RxSwift 系列(三) -- Combination Operators 前言 本篇文章将要学习如何将多个Observables组合成一个Observable.Combination Operat ...

  2. Hibernate 对象的生命周期及CRUD操作

    对象状态及生命周期 1.Transient(瞬时状态):new的对象为瞬时态 session中没有数据,数据库中没有数据. 2.Persistent(持久状态):被session管理的对象为持久状态, ...

  3. BZOJ1087【状压DP】

    题目链接[http://www.lydsy.com/JudgeOnline/problem.php?id=1087] 题意:在N×N的棋盘里面放K个国王,使他们互不攻击,共有多少种摆放方案.国王能攻击 ...

  4. 【BZOJ 3727】 3727: PA2014 Final Zadanie （递推）

    3727: PA2014 Final Zadanie Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 279  Solved: 121 Descript ...

  5. 【tarjan】BZOJ2140-稳定婚姻

    又名NTR的故事 [题目大意] n对夫妻Bi和Gi.若某男Bi与某女Gj曾经交往过,他们有私奔的可能性.不妨设Bi和Gj旧情复燃,进而Bj会联系上了他的初恋情人Gk,以此递推.若在Bi和Gi离婚的前提 ...

  6. Android Studio --> Gradle Build设置自动

    ps:http://www.cnblogs.com/kangyi/p/4448398.html 应用场景 通常情况下我们的apps发布后也就是release模式下log是不显示的,debug模式下是显 ...

  7. lucas定理 FOJ 2020 组合

     Problem 2020 组合 Accept: 886    Submit: 2084Time Limit: 1000 mSec    Memory Limit : 32768 KB Problem ...

  8. C# 基于正则表达式的字符串验证

    输入的字符串校验,是开发中经常遇到的问题,常用的办法是利用正则表达式进行判断.其特点是简洁有效. 1.正则表达基础知识 正则表达式的教程很多,这里两个基础教程: a.http://www.cnblog ...

  9. 安卓之service简单介绍

    一 什么是Service 二 如何使用Service 三 Service的生命周期   一 什么是Service Service,看名字就知道跟正常理解的“服务”差不多,后台运行,可交互这样的一个东西 ...

  10. SEPIC 单端初级电感转换器 稳压器 -- Zeta 转换器

    single ended primary inductor converter 单端初级电感转换器 SEPIC(single ended primary inductor converter) 是一种 ...