参考手册
AngularJS 介绍
AngularJS 模块

AngularJS 表达式

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

AngularJS 表达式

AngularJS 表达式可以写在双括号内：{{ expression }} 。

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

AngularJS 将解析表达式，并返回结果。

AngularJS 表达式与 JavaScript 表达式非常相似：它们可以包含文字、运算符和变量。例如 {5+5} 或 {firstName + " " + lastName}

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body>
  6. <div ng-app="">
  7. <p>我的第一个表达式: {{ 5 + 5 }}</p>
  8. </div>
  10. </body>
  11. </html>
运行一下

如果删除 ng-app 指令，HTML 将按原样显示表达式，而不进行解析:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body>
  6. <p>如果没有 ng-app 指令，HTML将按原样显示表达式，而不进行解析。</p>
  8. <div>
  9. <p>我的第一个表达式: {{ 5 + 5 }}</p>
  10. </div>
  12. </body>
  13. </html>
运行一下

你可以随心所欲地编写表达式，AngularJS 只需解析表达式并返回结果。

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

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

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body>
  6. <p>修改输入框的值:</p>
  8. <div ng-app="" ng-init="myCol='lightblue'">
  10. <input style="background-color:{{myCol}}" ng-model="myCol">
  12. </div>
  14. <p>AngularJS 解析表达式并返回结果。</p>
  16. <p>输入框的背景色将是您在输入字段中写入的任何颜色。</p>
  18. </body>
  19. </html>
运行一下

AngularJS 数字

AngularJS 数字与 JavaScript 数字相似:

  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body>
  6. <div ng-app="" ng-init="quantity=1;cost=5">
  7. <p>美元总计: {{ quantity * cost }}</p>
  8. </div>
  10. </body>
  11. </html>
运行一下

同样的例子使用 ng-bind:

  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body>
  6. <div ng-app="" ng-init="quantity=1;cost=5">
  7. <p>美元总计: <span ng-bind="quantity * cost"></span></p>
  8. </div>
  10. </body>
  11. </html>
运行一下

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

AngularJS 字符串

AngularJS 字符串类似于 JavaScript 字符串:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body>
  6. <div ng-app="" ng-init="firstName='John';lastName='Doe'">
  8. <p>完整名称是: {{ firstName + " " + lastName }}</p>
  10. </div>
  12. </body>
  13. </html>
运行一下

同样的例子使用 ng-bind:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body>
  6. <div ng-app="" ng-init="firstName='John';lastName='Doe'">
  8. <p>完整名称是: <span ng-bind="firstName + ' ' + lastName"></span></p>
  10. </div>
  12. </body>
  13. </html>
运行一下

AngularJS 对象

AngularJS 对象与 JavaScript 对象相似:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body>
  6. <div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
  8. <p>名称是 {{ person.lastName }}</p>
  10. </div>
  12. </body>
  13. </html>
运行一下

同样的例子使用 ng-bind:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body>
  6. <div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
  8. <p>名称是 <span ng-bind="person.lastName"></span></p>
  10. </div>
  12. </body>
  13. </html>
运行一下

AngularJS 数组

AngularJS 数组类似于 JavaScript 数组:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body>
  6. <div ng-app="" ng-init="points=[1,15,19,2,40]">
  8. <p>第三个结果是 {{ points[2] }}</p>
  10. </div>
  12. </body>
  13. </html>
运行一下

同样的例子使用 ng-bind:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body>
  6. <div ng-app="" ng-init="points=[1,15,19,2,40]">
  8. <p>第三个结果是 <span ng-bind="points[2]"></span></p>
  10. </div>
  12. </body>
  13. </html>
运行一下

AngularJS 表达式 vs. JavaScript 表达式

与 JavaScript 表达式一样，AngularJS 表达式可以包含文字、运算符和变量。与 JavaScript 表达式不同，AngularJS 表达式可以在 HTML 中编写。

AngularJS 表达式不支持条件、循环和异常，而 JavaScript 表达式支持。

AngularJS 表达式支持过滤器，而 JavaScript 表达式不支持过滤器。在本站的 JavaScript 教程中了解 JavaScript。

AngularJS 介绍
AngularJS 模块

分类导航