Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

AngularJS 表达式


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


AngularJS 表达式

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

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

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

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

示例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}

示例

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="">
  <p>我的第一个表达式:{{ 5 + 5 }}</p>
</div>

</body>
</html>
自己尝试 »

如果删除ng-app指令,HTML 将按原样显示表达式,而不会解析它。

示例

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div>
  <p>我的第一个表达式:{{ 5 + 5 }}</p>
</div>

</body>
</html>
自己尝试 »

您可以在任何地方编写表达式,AngularJS 将简单地解析表达式并返回结果。

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

通过更改其值来更改以下输入框的颜色

示例

<div ng-app="" ng-init="myCol='lightblue'">

<input style="background-color:{{myCol}}" ng-model="myCol">

</div>
自己尝试 »


AngularJS 数字

AngularJS 数字与 JavaScript 数字相同

示例

<div ng-app="" ng-init="quantity=1;cost=5">

<p>总计(美元):{{ quantity * cost }}</p>

</div>
自己尝试 »

使用ng-bind的相同示例

示例

<div ng-app="" ng-init="quantity=1;cost=5">

<p>总计(美元):<span ng-bind="quantity * cost"></span></p>

</div>
自己尝试 »

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


AngularJS 字符串

AngularJS 字符串与 JavaScript 字符串相同

示例

<div ng-app="" ng-init="firstName='John';lastName='Doe'">

<p>姓名是 {{ firstName + " " + lastName }}</p>

</div>
自己尝试 »

使用ng-bind的相同示例

示例

<div ng-app="" ng-init="firstName='John';lastName='Doe'">

<p>姓名是 <span ng-bind="firstName + ' ' + lastName"></span></p>

</div>
自己尝试 »

AngularJS 对象

AngularJS 对象与 JavaScript 对象相同

示例

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">

<p>姓名是 {{ person.lastName }}</p>

</div>
自己尝试 »

使用ng-bind的相同示例

示例

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">

<p>姓名是 <span ng-bind="person.lastName"></span></p>

</div>
自己尝试 »

AngularJS 数组

AngularJS 数组与 JavaScript 数组相同

示例

<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>第三个结果是 {{ points[2] }}</p>

</div>
自己尝试 »

使用ng-bind的相同示例

示例

<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>第三个结果是 <span ng-bind="points[2]"></span></p>

</div>
自己尝试 »

AngularJS 表达式与 JavaScript 表达式

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

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

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

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

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


×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
[email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
[email protected]

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.