我们知道，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. 西门子Prodave5.5使用说明及VC示例

    西门子PLC的通信协议主要是PPI.MPI.Profibus.CP243/CP343/CP443 网络协议,prodave是早期完成的程序接口,除了网络协议外其它的主要协议都支持,SoftNet是西门 ...

  2. Python——函数中的关键字参数

    关键字参数 可变参数允许你传入0个或任意个参数,这些可变参数在函数调用时自动组装为一个tuple.而关键字参数允许你传入0个或任意个含参数名的参数,这些关键字参数在函数内部自动组装为一个dict.请看 ...

  3. 【Android端 APP GPU过度绘制】GPU过度绘制及优化

    一.Android端的卡顿 Android端APP在具体使用的过程中容易出现卡顿的情况,比如查看页面时出现一顿一顿的感受,切换tab之后响应很慢,或者具体滑动操作的时候也很慢. 二.卡顿的原因 卡顿的 ...

  4. hdu 3307 Description has only two Sentences (欧拉函数+快速幂)

    Description has only two SentencesTime Limit: 3000/1000 MS (Java/Others) Memory Limit: 65536/32768 K ...

  5. XtraReport 添加空行的办法，很详细

    这两天为了做报表,研究了一下XtraReport .为了添加空行,想了很多办法.其中如果有分组时,网上给出的办法就会失败.现将经验公布一下,希望各位都能少走弯路. 1.加入自定义函数CreateCel ...

  6. MVC将服务器端的物理路径转换为服务器路径

    以图片为例 后台Controller.cs public FileResult ImageUrl(string file) { return File("物理路径"+file, & ...

  7. 實際案例: 獲取臨時票証 (JsApi Ticket)

    專案中選用大名鼎鼎的 Senparc 微信開發套件 獲取臨時票證處理常式的程式碼 (GetgVXinInfo.ashx) using Senparc.Weixin; using Senparc.Wei ...

  8. PHP 之 this self parent static 对比

    this 绑定的是当前已经实例化的对象 这样长出现的问题: 如果你在一个父类中使用$this调用当前一个类的方法或者属性,如果这个类被继承,且在相应的子类中有调用的属性或者方法是,则父类中的$this ...

  9. Windows下的maven安装及配置

    有时候开发需要用到maven来进行项目管理,说下怎么配置maven吧 环境&工具: windows系统 jdk1.8 apache-maven-3.2.5.zip eclipse 首先需要去A ...

  10. some things

    ////html[1]/body[1]/div[9]/div[1]/div[1]/div[1]/ul/li  截取规则 Articles/Article[1]:选取属于Articles子元素的第一个A ...