我们知道，AngularJs中的数据绑定是双向绑定的，View的改变，会改变Model，Model的改变也会改变View中的值，废话不多说，我们直接上代码。

　　

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

 </head>

 <body ng-app>

 <input type="text" ng-model="name"/>

 {{name}}

 <input type="text" ng-model="name"/>

 </body>

 <script type="text/javascript" src="../public/javascripts/lib/angular.js"></script>

 </html>

　　代码说明:

　　1、添加angularjs的引用。

　　2、使用指令ng-app告诉angularjs应该管理页面的哪一部分。

　　3、{{name}}这是angularjs的表达式，angularjs的表达式是通过$parse服务解释执行的，关于$parse我后续会讲。讲到这里，简单说一下angularjs表达式跟javascript表达式的区别：

　　　　a) angularjs的属性求值是对于scope的，而javascript是针对于window。

　　　　b) angularjs表达式的值是宽容的，就是说，对于undefined，null这些值，在angularjs里面是允许的，不会报错。

　　　　c) angularjs中，没有流控制语句，比如：条件分支，循环，抛出异常。

　　　　d) angularjs中，我们还可以把表达式的值传入过滤器链(filter chains)，关于filter我会在后续讲。

　　4、<input type="text" ng-model="name"/> 这里我们是把表单绑定在一个model中，在angularjs中使用ng-model指令，这里model的值就是相当value，而表单本身就是个View，{{name}}以及后面的表单也是个View。我们在第一个表单中输入数字后，后面的两个View就跟着变。

　　5、效果如下：

　　

　　关于数据绑定就讲到这，里面涉及的一些概念跟特性会在后面陆陆续续的讲到，既然angularjs是基于MVC或者MVVM的开发方式，本篇已经提到了View跟Model，那一篇我将讲一下angularjs的控制器跟angularjs的模块。

02、AngularJs的数据绑定的更多相关文章

  1. 10分钟学会AngularJS的数据绑定

     前言:为什么要用AngularJS?  相信用过.NetMVC的人都知道用rezor绑定数据是一件很爽的事情,C#代码直接在前台页面中输出.然后这种比较适用于同步请求.   当我们的项目离不开异步请 ...

  2. AngularJS双向数据绑定

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. AngularJS基础02 神奇的数据绑定（Binding）

    作者:arccosxy  转载请注明出处:http://www.cnblogs.com/arccosxy/ 上一节,我们在JS中声明一个scope变量然后在HTML直接访问它,这非常的酷.但是Angu ...

  4. 关于AngularJs，数据绑定与自定义验证

    最近开始着手学起了Angular,抱着好奇的心情开始研究了起来.忽然发现angular可以巧妙而方便的进行数据的绑定验证啊什么的.(当然,我只是刚开始学,所有可能有更强大的功能,只是我还没有看到) 那 ...

  5. AngularJS笔记---数据绑定

    一.数据绑定 1.简单绑定 下面实现了一个简单的加法运算的绑定, A.ng-app:表示该div以内都在AngularJS的应用, 去掉ng-app="" 那么后面的绑定都将无效 ...

  6. AngularJS 的数据绑定

    单向绑定(ng-bind) 和 双向绑定(ng-model) 的区别 ng-bind 单向数据绑定($scope -> view),用于数据显示,简写形式是 {{}}. 1 <span n ...

  7. Vue、AngularJS 双向数据绑定解剖

    数据与视图的绑定与同步,最终体现在对数据的读写处理过程中,也就是 Object.defineProperty() 定义的数据 set.get 函数中.Vue 中对于的函数为 defineReactiv ...

  8. 关于 AngularJS 的数据绑定

    单向绑定(ng-bind) 和 双向绑定(ng-model) 的区别 ng-bind 单向数据绑定($scope -> view),用于数据显示,简写形式是 {{}}. 1 <span n ...

  9. AngularJS入门心得2——何为双向数据绑定

    前言:谁说Test工作比较轻松,最近在熟悉几个case,差点没疯.最近又是断断续续的看我的AngularJS,总觉得自己还是没有入门,可能是自己欠前端的东西太多了,看不了几行代码就有几个常用函数不熟悉 ...

随机推荐

  1. 使用date类和format类对系统当前时间进行格式化显示

    一:Date------------String 代码1:(代码二对显示出来的时间格式进行优化) package DateDemo; import java.text.SimpleDateFormat ...

  2. centos7安装apue.3e时出错处理

    错误代码如下: /tmp/ccb9gvom.o: In function `thr_fn': barrier.c:(.text+0x6e): undefined reference to `heaps ...

  3. EhCache RMI 分布式缓存/缓存集群

    EhCache 系统简介 EhCache 是一个纯 Java 的进程内缓存框架,具有快速.精干等特点. EhCache 的主要特性有: 快速.精干 简单: 多种缓存策略: 缓存数据有两级:内存和磁盘, ...

  4. PCIE学习

    PCIe在传输中用8b/10b编码,所以单PCEe2.0的有效带度是4Gb/s x2模式将用于内部接口而非插槽模式 PCIe卡能使用在至少与之传输通道相当的插槽上(例如x1接口的卡也能工作在x4或x1 ...

  5. 16.10.18学到的Java知识

    1. 突然间发现自己忘了关于自增自减运算符放在变量前后的区别是什么了? 于是乎,我查了资料. 如果只对自变量进行加1或减1的时候,放在前面和后面都是没有区别的. 但是,如果自增自减运算符使用在需要赋值 ...

  6. 在VisualStudio2012环境下安装ArcEngine 10.0

    因为ArcEngine10.0默认对应的开发工具为VS2010,在安装了VS2012的情况下安装ArcEngine10.0(注意:我自己的环境为VS2012和ArcEngine10.0,对于其他版本在 ...

  7. genymotion不能联网

    1.打开Oracle VM Virtual Box,选中相应的虚拟机,点击上侧工具栏中的『设置』: 2.选择『网络』,接着将: 网卡1的连接方式设置为仅主机(Host-Only)适配器: 将网卡2设置 ...

  8. css 字间距、CSS字体间距、css 字符间距设置

    1.text-indent设置抬头距离css缩进 2.letter-spacing来设置字与字间距_字符间距离,字体间距css样式

  9. Oracle 12c 的新功能：模式匹配查询

    模式匹配SQL 在一系列的数据行中辨识出某种模式是一种广泛需求的功能,但在以前的SQL中是不可能的.有许多解决方法,但这些都很难写,很难理解,而且执行效率低下.在Oracle数据库中,从12c开始,你 ...

  10. Java程序员必须熟知的十项技术

    1.语法 Java程序员必须比较熟悉语法,在写代码的时候IDE的编辑器对某一行报错应该能够根据报错信息知道是什么样的语法错误并且知道任何修正. 2.命令 必须熟悉JDK带的一些常用命令及其常用选项,命 ...