AngularJS 0002:表达式

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

猜你喜欢

转载自blog.csdn.net/yysyangyangyangshan/article/details/53323137