AngularJS表达式

简介:

AngularJS 表达式

AngularJS 使用 表达式 把数据绑定到 HTML。

  • AngularJS 表达式写在双大括号内:{{ expression }}
  • AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙。
  • AngularJS 将在表达式书写的位置”输出”数据。
  • AngularJS 表达式 很像 JavaScript 表达式:它们可以包含文字、运算符和变量。

AngularJS 数字

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>AngularJS</title>
        <script type="text/javascript" src="js/angular.min.js"></script>
    </head>
    <body ng-app="" ng-init="price=1.5;count=10">
        <div>
            总价(price*count):{{price * count}}
        </div>
    </body>
</html>

使用ng-bind实现相同效果:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>AngularJS</title>
        <script type="text/javascript" src="js/angular.min.js"></script>
    </head>

    <body ng-app="" ng-init="price=1.5;count=10">
        <div>
            总价(price*count):<span ng-bind="price * count"></span>
        </div>
    </body>

</html>

AngularJS 字符串

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>AngularJS</title>
        <script type="text/javascript" src="js/angular.min.js"></script>
    </head>

    <body ng-app="" ng-init="first='jiang';last='gujin'">
        <div>
            {{first + ' ' + last}}
        </div>
    </body>

</html>

AngularJS 对象

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>AngularJS</title>
        <script type="text/javascript" src="js/angular.min.js"></script>
    </head>

    <body ng-app="" ng-init="persion={first:'jiang',last:'gujin'}">
        <div>
            {{persion.first + ' ' + persion.last}}
        </div>
    </body>

</html>

AngularJS 数组

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>AngularJS</title>
        <script type="text/javascript" src="js/angular.min.js"></script>
    </head>

    <body ng-app="" ng-init="color=['red', 'blue', 'green']">
        <div>
            {{color[1]}}
        </div>
    </body>

</html>

AngularJS 表达式 与 JavaScript 表达式

  • 类似于 JavaScript 表达式,AngularJS 表达式可以包含字母,操作符,变量。
  • 与 JavaScript 表达式不同,AngularJS 表达式可以写在 HTML 中。
  • 与 JavaScript 表达式不同,AngularJS 表达式不支持条件判断,循环及异常。
  • 与 JavaScript 表达式不同,AngularJS 表达式支持过滤器。
目录
相关文章
|
人工智能 Serverless API
云原生应用开发平台CAP评测
CAP(Cloud Application Platform)是阿里云提供的一站式应用开发及管理平台,集成了Serverless计算、AI应用模板、先进开发者工具和企业级应用管理功能。本文结合官方文档与实际操作,全面评测了CAP的产品优势、实际操作体验及性能表现,展示了其在降低成本、提高开发效率和灵活性方面的卓越能力。
|
SQL 关系型数据库 测试技术
详解DB2 restore恢复数据库
本文介绍了将生产数据库完整恢复到测试环境的具体步骤和注意事项。包括检查服务器空间、上传数据库文件、停掉数据库连接、查看日志、设置编码页、日志重定向、设置表空间大小、执行恢复、前滚日志、恢复字符集、善后工作等操作,帮助确保数据恢复过程顺利进行。
703 0
|
监控 NoSQL 中间件
中间件常见问题
【7月更文挑战第12天】
421 12
|
弹性计算 运维 容灾
从人工到自动,泛微云上自动化部署实践
泛微借助阿里云的底层优势,将部分客户的服务迁移到云上,从硬件和网络上保证用户能够高效访问 OA 系统
从人工到自动,泛微云上自动化部署实践
|
存储 数据可视化 数据管理
Google Earth Engine谷歌地球引擎GEE外部栅格矢量数据导入管理与下载及数据与代码共享
Google Earth Engine谷歌地球引擎GEE外部栅格矢量数据导入管理与下载及数据与代码共享
456 1
|
消息中间件 存储 Kafka
KafKa C++实战
KafKa C++实战
947 0
|
调度
Elastic-Job之异常处理器
elastic-job允许用户在任务调度异常时指定处理异常的异常处理器,异常处理器由接口JobExceptionHandler定义,其定义如下: /** * 作业异常处理器.
3800 0
|
安全 芯片
电子线路PCB软件使用技巧及方法(Altium Designer )
电子线路PCB软件使用技巧及方法(Altium Designer )
712 0
|
存储 机器学习/深度学习 NoSQL
深入理解 Redis cluster GOSSIP 协议
深入理解 Redis cluster GOSSIP 协议
836 0
|
数据可视化 JavaScript 开发工具