我们知道，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. [MVC] DIV 布局

    [MVC] DIV 布局 <style> .top { background-color: red; height: 50px; top: 0px; position: absolute; ...

  2. Dev WPF使用总结

    1.换肤 ThemeManager.ApplicationThemeName = Theme.DXStyle.Name this.UpdateLayout(); //重新布局

  3. （转载）python2+selenium自动化测试系列（二）

    16.Selenium2+python自动化16-alert\confirm\prompt 17.Selenium2+python自动化17-JS处理滚动条 18.Selenium2+python自动 ...

  4. SQL中EXISTS怎么用[转]

    SQL中EXISTS怎么用 1 2 3 4 分步阅读 EXISTS用于检查子查询是否至少会返回一行数据,该子查询实际上并不返回任何数据,而是返回值True或False 方法/步骤 1 EXISTS用于 ...

  5. jQuery Mobile 表单输入元素

    jQuery Mobile 文本输入 输入字段是通过标准的 HTML 元素编写的,jQuery Mobile 会为它们设置专门针对移动设备的美观易用的样式.您还可以使用新的 HTML5 <inp ...

  6. 初窥Kaggle竞赛

    初窥Kaggle竞赛 原文地址: https://www.dataquest.io/mission/74/getting-started-with-kaggle 1: Kaggle竞赛 我们接下来将要 ...

  7. 将三维空间的点按照座标排序（兼谈为std::sort写compare function的注意事项）

    最近碰到这样一个问题:我们从文件里读入了一组三维空间的点,其中有些点的X,Y,Z座标只存在微小的差别,远小于我们后续数据处理的精度,可以认为它们是重复的.所以我们要把这些重复的点去掉.因为数据量不大, ...

  8. SikuliLibrary 库关键字注释

    在  https://github.com/rainmanwy/robotframework-SikuliLibrary 看到rainmanwy 整理的SikuliLibrary库,非常适合工作需要, ...

  9. ST算法

    作用:ST算法是用来求解给定区间RMQ的最值,本文以最小值为例 举例: 给出一数组A[0~5] = {5,4,6,10,1,12},则区间[2,5]之间的最值为1. 方法:ST算法分成两部分:离线预处 ...

  10. Servlet过滤器（详询请加qq：2085920154）

    1.1  过滤器简介 过滤器是向Web应用程序的请求和响应处理添加功能的Web服务组件.在Servlet处理用户输入的请求之前,过滤器可以访问该请求.在将Web响应发送给用户之前,过滤器还可以访问该响 ...