AngularJS 表达式学习笔记

1. 表达式的概念

在AngularJS中，表达式是一种简单而强大的语法，可以用于绑定数据和DOM元素。表达式通常包含一个或多个变量和运算符，它们可以计算出一个值。表达式可以用在HTML、指令、过滤器、事件等多个方面。

2. 表达式的语法

在AngularJS中，表达式使用双大括号{{}}进行包裹。表达式内部可以包含变量、运算符、函数等多种元素，如下所示：

Copy Code
{{ variable + 5 }}
{{ 2 * (age + 5) }}
{{ 'Hello, ' + name }}

3. 表达式的特点

• 可以在HTML中进行绑定，将数据与DOM元素关联起来。
• 自动触发脏检查机制，当表达式所依赖的变量值发生变化时，会自动重新计算表达式的值，并将新值渲染到页面上。
• 不支持条件语句if、循环语句for等复杂语义。
• 表达式应该是幂等的，也就是说，同样的输入始终应该产生同样的输出。

4. 实例

4.1. 插值表达式

插值表达式是AngularJS中最常用的表达式形式，它可以在HTML中插入变量的值，如下所示：

htmlCopy Code
<div>{{ name }}</div>

4.2. 表达式的计算

表达式可以进行各种基本运算，例如加减乘除等，如下所示：

htmlCopy Code
<div>{{ num1 + num2 }}</div>

4.3. 函数调用

表达式还可以调用函数，如下所示：

htmlCopy Code
<div>{{ getFullName() }}</div>

javascriptCopy Code
$scope.getFullName = function() {
  return $scope.firstName + ' ' + $scope.lastName;
};

4.4. 条件判断

虽然表达式不支持if语句，但是可以利用三目运算符实现条件判断，如下所示：

htmlCopy Code
<div>{{ isMale ? '男' : '女' }}</div>

4.5. 过滤器

过滤器可以对表达式的结果进行处理，使其更符合要求。例如，将一个字符串转换为大写，我们可以使用内置的大写过滤器uppercase，如下所示：

htmlCopy Code
<div>{{ name | uppercase }}</div>

结论

表达式是AngularJS的核心功能之一，它极大地方便了我们在HTML和JavaScript之间的数据传递与绑定。熟练掌握这一知识点对于开发者来说是至关重要的。