我们知道，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. Java实现文件压缩与解压

    Java实现ZIP的解压与压缩功能基本都是使用了Java的多肽和递归技术,可以对单个文件和任意级联文件夹进行压缩和解压,对于一些初学者来说是个很不错的实例.(转载自http://www.puiedu. ...

  2. EditTextPreference点击后输入框显示隐藏内容，类似密码输入(转)

    http://bbs.anzhuo.cn/thread-928131-1-1.html EditTextPreference点击后输入框显示隐藏内容,类似密码输入... [复制链接]     aski ...

  3. spring整合struts2

    1. Spring 如何在 WEB 应用中使用 ? 1). 需要额外加入的 jar 包: spring-web-4.0.0.RELEASE.jarspring-webmvc-4.0.0.RELEASE ...

  4. [原创]NIOS小知识总结

    本文记录了在使用NIOS中遇到的一些问题和相关的原因分析及解决办法,做个总结方便以后查阅.也希望可以帮到有同样问题的攻城狮.本文长期更新,遇到了就写下. 本人使用软件版本:QuartusII 13.0 ...

  5. 寒冰王座 hdu 1248(背包)

    http://acm.hdu.edu.cn/showproblem.php?pid=1248 #include <stdio.h> #include <stdlib.h> #i ...

  6. C# winform key value型数据如何绑定ComBox (hashtable,keyvaluepair,dictionary )

    cbUserAgent是一个combox ArrayList list = new ArrayList(); Dictionary<string, string> useragents = ...

  7. ubuntu 下安装32位库 ia32-libs方法

    这两天在整Linux系统,要配置JDK,SDK环境,但是SDK配置使用的时候,提示没有权限. 需要安装32位库来解决,还有就是在修改文件的时候提示不能修改.唉...反正就是没有办法正常操作啦 后来根据 ...

  8. 【随笔】从gitHub上获取源码

    有时候,需要从gitHub上获取源码,下面介绍几个方法: 1.获取链接: 打开gitHub代码库的页面,能在右边看到这个: 点击红圈里的标记,该链接就会复制下来. 然后,如果安装了小乌龟(Tortoi ...

  9. 面试题<初级>

    INTERVIEW .markdown-body ul pre code { background:red; font-size:40px; } @code-char:"```" ...

  10. XE3随想14：关于 SO 与 SA 函数

    通过 SuperObject 的公用函数 SO 实现一个 ISuperObject 接口非常方便; 前面都是给它一个字符串参数, 它的参数可以是任一类型甚至是常数数组. SA 和 SO 都是返回一 I ...