我们知道，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. 使用dd命令克隆整个系统(转)

    神奇的ghost的原理是什么呢?不就是数据复制吗?Linux下的dd命令不就是最强大的数据复制工具!          既然如此,我为什么要使用g4l这样复杂的工具呢?一条dd命令不就可以帮我实现任意 ...

  2. python学习之——调用adb命令完成移动端界面测试

    实现原理 Hierarchy Viewer:获得当前手机实时的UI信息,方便用于手机的自动化测试: python中的subprocess.Popen():调用系统命令: uiautomator工具:获 ...

  3. js+cookie 购物车

    $(function () { //var ctx = new Ch(); //ctx.Clear(); //$.cookie(ctx.cookieName, ""); //ale ...

  4. pynotify

    import pynotify,sys if not pynotify.init('a'): sys.exit(1) n=pynotify.Notification('title','info','f ...

  5. host 备份

    # Copyright (c) 1993-1999 Microsoft Corp.## This is a sample HOSTS file used by Microsoft TCP/IP for ...

  6. nginx编译模块详解

    –prefix= 指向安装目录–sbin-path 指向(执行)程序文件(nginx)–conf-path= 指向配置文件(nginx.conf)–error-log-path= 指向错误日志目录–p ...

  7. 摘记 pyinstaller 使用自定义 spec

    下面的是官网的文档, 我们可以用自定义spec的方式把想要的文件打包到目标文件夹里面 例如: 我们在程序中用了一个图标 test.ico, 如果我们只用 pyinstaller -w test.py ...

  8. Thinkphp Exception捕获异常失败

    try catch 比较坑,默认这样是走TP 的错误模板页面 自定义的话: try { } catch ( \Exception $e ) {}加个\

  9. TCP/IP入门(3) --传输层

    原文:http://blog.csdn.net/zjf280441589/article/category/1854365 传输层的主要功能 1)传输层为应用进程之间提供端到端的逻辑通信(网络层是为主 ...

  10. js 有用的代码

    1. 如何创建嵌套的过滤器: //允许你减少集合中的匹配元素的过滤器, //只剩下那些与给定的选择器匹配的部分.在这种情况下, //查询删除了任何没(:not)有(:has) //包含class为“s ...