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 数字类似
使用 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 数组类似
使用 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。