AngularJS 0002：表达式

来源：互联网发布：mac 快捷方式参数编辑：程序博客网时间：2024/06/01 08:21

AngularJS 表达式格式：{{ expression }}，
我们来看各个类型的表达式的使用和写法。

数字表达式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <title></title>    <script src="Scripts/angular.min.js"></script></head><body>    <!--数字表达式-->    <div ng-app="" ng-init="addend=1;summand=1">        <p>1+1等于几啊？ 等于  {{ addend + summand }}</p>    </div></body></html>

效果

也可以进行绑定，

    <div ng-app="" ng-init="addend=8;summand=2">        <p>8+2等于几啊？ 等于  <span ng-bind="addend + summand "></span></p>    </div>

效果

字符串表达式

    <!--字符串表达式-->    <div ng-app="" ng-init="firstName='youshan';lastName='Yang'">        <p>姓名： {{ firstName + " " + lastName }}</p>    </div>

效果

同样，也可以绑定

    <div ng-app="" ng-init="person={firstName:'youshan',lastName:'yang'}">        <p>名字为 <span ng-bind="person.firstName"></span></p>    </div>

效果

数组表达式

    <!--数组表达式-->    <div ng-app="" ng-init="myArrays=[1,3,88,99,111]">        <p>第三个值为 {{ myArrays[2] }}</p>    </div>

效果

同样的，也可以绑定

   <div ng-app="" ng-init="myArrays=[1,3,88,99,111]">        <p>第二个值为 <span ng-bind="myArrays[1]"></span></p>    </div>

效果

类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。
与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。
与 JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常。

与 JavaScript 表达式不同，AngularJS 表达式支持过滤器。

工程代码下载：http://download.csdn.net/detail/yysyangyangyangshan/9692750

1 0