这是一个最简单的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. input限制中文字数

    我们知道input控件有一个maxlength属性可以控制输入字符的长度,但是,它并不会识别是汉字还是其他符号,所以输入maxlength个汉字显然是不符合要求的. 为了实现对带有汉字的输入框长度控制 ...

  3. JZYZOJ1525 HAOI2012道路 堆优化的dijkstra+pair

    From Tyvj Guest ☆[haoi2012]道路                 描述 Description     C国有n座城市,城市之间通过m条单向道路连接.一条路径被称为最短路,当 ...

  4. VIM选项配置说明

    选项配置说明 选项书写格式 选项说明 :se[t] 显示所有被改动的选项 :se[t] all 显示所有非 termcap 选项 :se[t] termcap 显示所有 termcap 选项 :se[ ...

  5. noip模拟 五子棋

    递推+模拟.在读取数据时,我们建4个图,分别代表这个图中横.纵.左斜右斜的连续长度.例如heng[i][j]代表ij这个点所在的横着一条线的长度. 然后搜索,对于一个空点,如果他的上下都>=4那 ...

  6. Codeforces Beta Round #7 B. Memory Manager 模拟题

    B. Memory Manager 题目连接: http://www.codeforces.com/contest/7/problem/B Description There is little ti ...

  7. Dual transistor improves current-sense circuit

    In multiple-output power supplies in which a single supply powers circuitry of vastly different curr ...

  8. Spring在bean配置文件中定义电子邮件模板

    在上一篇Spring电子邮件教程,硬编码的所有电子邮件属性和消息的方法体中的内容,这是不实际的,应予以避免.应该考虑在Spring bean 配置文件中定义电子邮件模板. 1.Spring的邮件发件人 ...

  9. gropf

    http://blog.csdn.net/yetyongjin/article/details/7717464 带-pg编译程序$ gcc -pg -o test test.c先运行程序$ ./tes ...

  10. ASPNET CORE初探

    ASP.NET Core 开发-中间件(Middleware)   ASP.NET Core开发,开发并使用中间件(Middleware). 中间件是被组装成一个应用程序管道来处理请求和响应的软件组件 ...