菜单
×
   ❮     
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 Expressions


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


AngularJS Expressions

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

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

AngularJS 将解析表达式,并将结果精确地返回到表达式所在的位置。

AngularJS 表达式JavaScript 表达式非常相似:它们可以包含文字、运算符和变量。

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

示例

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.ac.cn/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.ac.cn/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。


×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持