AngularJS 0002：表达式

最新推荐文章于 2024-10-24 17:48:27 发布

杨友山

最新推荐文章于 2024-10-24 17:48:27 发布

阅读量629

点赞数 1

CC 4.0 BY-SA版权

分类专栏： AngularJS

本文链接：https://blog.csdn.net/yysyangyangyangshan/article/details/53323137

AngularJS 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了AngularJS中各种表达式的使用方法，包括数字表达式、字符串表达式和数组表达式等，并通过实例展示了如何在HTML中应用这些表达式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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