表达式

收藏350

阅读2927

更新时间2025-08-11

AngularJS 表达式

AngularJS 表达式可以写在双大括号内:{{ expression }}

AngularJS 表达式也可以写在指令内:ng-bind="expression"

AngularJS 会解析表达式,并在写表达式的位置返回结果。

AngularJS 表达式很像 JavaScript 表达式:它们可以包含字面量、运算符和变量。

Example {{ 5 + 5 }} or {{ firstName + " " + lastName }}

实例






我的第一个表达式:{{ 5 + 5 }}

运行实例 »

点击 "运行实例" 按钮查看在线实例

如果移除了 ng-app 指令,HTML 将原样显示表达式,不会对其进行解析:

实例






我的第一个表达式:{{ 5 + 5 }}

运行实例 »

点击 "运行实例" 按钮查看在线实例

您可以在喜欢的任何位置编写表达式,AngularJS 会简单地解析表达式并返回结果。

示例:让 AngularJS 更改 CSS 属性的值。

通过更改其值来改变下面输入框的颜色:

浅蓝色

实例

运行实例 »

点击 "运行实例" 按钮查看在线实例

AngularJS 数字

AngularJS 数字就像 JavaScript 数字:

实例

总金额(美元):{{ quantity * cost }}

运行实例 »

点击 "运行实例" 按钮查看在线实例

使用 ng-bind 的相同例子:

实例

总金额(美元):

运行实例 »

点击 "运行实例" 按钮查看在线实例

使用 ng-init 并不常见。您将在关于控制器的章节中学习初始化数据的更好方法。

AngularJS 字符串

AngularJS 字符串就像 JavaScript 字符串:

实例

名字是 {{ firstName + " " + lastName }}

运行实例 »

点击 "运行实例" 按钮查看在线实例

使用 ng-bind 的相同示例:

实例

名字是

运行实例 »

点击 "运行实例" 按钮查看在线实例

AngularJS 对象

AngularJS 对象就像 JavaScript 对象:

实例

名字是 {{ person.lastName }}

运行实例 »

点击 "运行实例" 按钮查看在线实例

使用 ng-bind 的相同示例:

实例

名字是

运行实例 »

点击 "运行实例" 按钮查看在线实例

AngularJS 数组

AngularJS 数组就像 JavaScript 数组:

实例

The third result is {{ points[2] }}

运行实例 »

点击 "运行实例" 按钮查看在线实例

使用 ng-bind 的相同示例:

实例

The third result is

运行实例 »

点击 "运行实例" 按钮查看在线实例

AngularJS 表达式与 JavaScript 表达式

与 JavaScript 表达式类似,AngularJS 表达式可以包含字面量、运算符和变量。

与 JavaScript 表达式不同,AngularJS 表达式可以写在 HTML 内部。

AngularJS 表达式不支持条件语句、循环和异常,而 JavaScript 表达式则支持。

AngularJS 表达式支持过滤器,而 JavaScript 表达式则不支持。

在我们的 JavaScript 教程中了解有关 JavaScript 的信息。

相关

视频

RELATED VIDEOS

更多

免费

Web前端开发极速入门
初级 Web前端开发极速入门

219920次学习

收藏

免费

前端入门_HTML5
初级 前端入门_HTML5

616946次学习

收藏

免费

30分钟学会网站布局
初级 30分钟学会网站布局

238440次学习

收藏

免费

CSS视频教程-玉女心经版
初级 CSS视频教程-玉女心经版

393054次学习

收藏

免费

独孤九贱(1)_HTML5视频教程

免费

独孤九贱(6)_jQuery视频教程

免费

独孤九贱(7)_Bootstrap视频教程

免费

独孤九贱(2)_CSS视频教程
初级 独孤九贱(2)_CSS视频教程

229605次学习

收藏

科技资讯

更多

精选课程

更多
前端入门_HTML5
前端入门_HTML5

共29课时

61.7万人学习

CSS视频教程-玉女心经版
CSS视频教程-玉女心经版

共25课时

39.3万人学习

JavaScript极速入门_玉女心经系列
JavaScript极速入门_玉女心经系列

共43课时

70.9万人学习

独孤九贱(1)_HTML5视频教程
独孤九贱(1)_HTML5视频教程

共25课时

61.6万人学习

独孤九贱(2)_CSS视频教程
独孤九贱(2)_CSS视频教程

共22课时

23万人学习

独孤九贱(3)_JavaScript视频教程
独孤九贱(3)_JavaScript视频教程

共28课时

33.9万人学习

独孤九贱(4)_PHP视频教程
独孤九贱(4)_PHP视频教程

共89课时

125万人学习

关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号