zoukankan      html  css  js  c++  java
  • 02、AngularJs的数据绑定

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

      

     1 <!DOCTYPE html>
     2 <html>
     3 <head lang="en">
     4     <meta charset="UTF-8">
     5     <title></title>
     6 </head>
     7 <body ng-app>
     8 <input type="text" ng-model="name"/>
     9 {{name}}
    10 <input type="text" ng-model="name"/>
    11 </body>
    12 <script type="text/javascript" src="../public/javascripts/lib/angular.js"></script>
    13 </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的模块。

  • 相关阅读:
    mysql报错排查总结
    java设计模式--外观模式
    java设计模式--策略模式
    java设计模式--策略模式
    java设计模式--简单工厂
    java设计模式--简单工厂
    国外有哪些比较好的IT社区
    使用jmeter进行性能测试-Jmeter教程及技巧汇总 (转)
    Fiddler环境配置教程
    Fiddler+Jmeter+断言详细教程
  • 原文地址:https://www.cnblogs.com/happylinjie/p/4471315.html
Copyright © 2011-2022 走看看