zoukankan      html  css  js  c++  java
  • AngularJS快速入门指南03:表达式

      AngularJS通过表达式将数据绑定到HTML。


    AngularJS表达式

      AngularJS表达式写在双大括号中:{{ 表达式语句 }}

      AngularJS表达式绑定数据到HTML的方式与ng-bind指令的方式相同。

      AngularJS会准确地将表达式“输出”为计算的结果。

      AngularJS表达式JavaScript表达式有许多相似之处,它们都包含文字、运算符和变量。例如{{ 5 + 5 }}和{{ firstName + " " + lastName }}

    <!DOCTYPE html>
    <html>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <body>
    
    <div ng-app="">
         <p>My first expression: {{ 5 + 5 }}</p>
    </div>
    

    运行

      如果你去掉ng-app指令,表达式会被直接显示在页面上而不会被计算。

    <!DOCTYPE html>
    <html>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <body>
    
    <div>
         <p>My first expression: {{ 5 + 5 }}</p>
    </div>
    
    </body>
    </html>

    运行


    AngularJS数字

      AngularJS数字和JavaScript数字一样:

    <div ng-app="" ng-init="quantity=1;cost=5">
    
    <p>Total in dollar: {{ quantity * cost }}</p>
    
    </div>

    运行

      同样,我们可以使用ng-bind指令达到相同的效果:

    <div ng-app="" ng-init="quantity=1;cost=5">
    
    <p>Total in dollar: <span ng-bind="quantity * cost"></span></p>
    
    </div>

    运行

    Note 使用ng-init指令在AngularJS开发中非常普遍。在控制器一节中你将会看到更好的初始化数据的方法。

    AngularJS字符串

      AngularJS字符串与JavaScript字符串一样:

    <div ng-app="" ng-init="firstName='John';lastName='Doe'">
    
    <p>The name is {{ firstName + " " + lastName }}</p>
    
    </div>

    运行

      同样,我们可以使用ng-bind指令达到相同的效果:

    <div ng-app="" ng-init="firstName='John';lastName='Doe'">
    
    <p>The name is <span ng-bind="firstName + ' ' + lastName"></span></p>
    
    </div>

    运行


    AngularJS对象

      AngularJS对象与JavaScript对象一样:

    <div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
    
    <p>The name is {{ person.lastName }}</p>
    
    </div>

    运行

      同样,我们可以使用ng-bind指令达到相同的效果:

    <div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
    
    <p>The name is <span ng-bind="person.lastName"></span></p>
    
    </div>

    运行


    AngularJS数组

      AngularJS数组与JavaScript数组一样:

    <div ng-app="" ng-init="points=[1,15,19,2,40]">
    
    <p>The third result is {{ points[2] }}</p>
    
    </div>

    运行

      同样,我们可以使用ng-bind指令达到相同的效果:

    <div ng-app="" ng-init="points=[1,15,19,2,40]">
    
    <p>The third result is <span ng-bind="points[2]"></span></p>
    
    </div>

    运行


    AngularJS表达式与JavaScript表达式比较

      与JavaScript表达式相同,AngularJS表达式也包含文字、运算符和变量。与JavaScript表达式不同的是,

    • AngularJS表达式可以写在HTML里面。
    • AngularJS表达式不支持条件和循环语句,而且没有exception语句。
    • AngularJS表达式支持过滤器。
  • 相关阅读:
    2-1(续)
    2-1
    28-69. Sqrt(x)
    27-75. Sort Colors
    26-78. Subsets
    MySQL--->存储引擎及图形化工具
    MySQL--->高级对象
    MySQL--->常用函数
    MySQL--->多表查询
    MySQL--->高级查询
  • 原文地址:https://www.cnblogs.com/jaxu/p/4486613.html
Copyright © 2011-2022 走看看