AngularJS 0002：表达式

发布时间：2020-12-17 09:47:22 所属栏目：安全来源：网络整理

导读：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/

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,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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!