这是一个最简单的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. python中间件

    django 中的中间件(middleware),在django中,中间件其实就是一个类,在请求到来和结束后,django会根据自己的规则在合适的时机执行中间件中相应的方法. 1.中间件的方法 pro ...

  2. FastReport.Net使用：[27]样式使用

    样式设置与使用 1.打开样式设置界面,通过 报表->样式 来打开. 2.样式设置包含:边框,填充,字体和文本颜色.假如不需要某项设置,可将其选择框去掉. 3.设置好样式后,将标题的style设置 ...

  3. PHP定义字符串

    <?php /** * 定义字符串 * '单引号, ""双引号, <<<定界符 * * 单引号和双引号的区别:双引号可以正常解析变量,单引号不能 * 通过大 ...

  4. luoguP3600 随机数生成器 期望概率DP + DP优化

    这篇题解更像对他人题解的吐槽和补充? 考虑答案 $E[X] = \sum\limits_{i = 1}^{x} i P(X = i)$ $P(X = i)$不好求................(其实 ...

  5. 【20181024T2】小C的序列【GCD性质+链表】

    题面 [错解] 一眼不可做啊 哎分治? 算不了啊 真的是,打暴力走人 20pts (事实上,还有20pts是随机数据,加个小小的特判就可以) [正解] 首先,从l开始往后gcd最多只有O(log)种取 ...

  6. AIDL原理之 Framewok层实现

    AIDLFramework层的架构,如下图: 换而言之,Android就是在传统的C/S架构中加入了一层,实现IPC.图中表明,AIDL类似COM的Proxy/Stub架构.不过是现在android自 ...

  7. git -- git clone

    git clone 命令参数: usage: git clone [options] [--] <repo> [<dir>] -v, --verbose be more ver ...

  8. URAL 1997 Those are not the droids you're looking for 二分图最大匹配

    Those are not the droids you're looking for 题目连接: http://acm.timus.ru/problem.aspx?space=1&num=1 ...

  9. Petuum - Careers

    Petuum - Careers Cloudformation

  10. chrome插件开发-----------将网址转化成二维码website2QRcode

    微信自带的浏览器无法输入链接,仅仅能通过扫描二维码实现.可是有时候看到一个有趣的站点,想分享,还得先去将链接转化成二维码的站点.先转成二维码.再扫描.有点麻烦.所以写了一个插件.直接生成二维码. 须要 ...