AngularJS 表达式

在 AngularJS 中，表达式是用来绑定数据到 HTML 元素的一种方式。表达式会在每次页面加载时被重新计算，并且可以包含变量、运算符和函数调用。

语法

AngularJS 表达式使用双大括号 {{}} 来包裹，如下所示：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>AngularJS 表达式</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>

<div ng-app="">
    <p>我的名字是 {{ firstName + ' ' + lastName }}</p>
</div>

</body>
</html>

在上面的例子中，{{ firstName + ' ' + lastName }} 是一个 AngularJS 表达式，它会将 firstName 和 lastName 变量的值连接起来并显示在页面上。

数据绑定

AngularJS 表达式还可以用于数据绑定，当数据发生变化时，页面上的表达式会自动更新。例如：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>AngularJS 表达式</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>

<div ng-app="" ng-init="name='Alice'">
    <p>我的名字是 {{ name }}</p>
    <input type="text" ng-model="name">
</div>

</body>
</html>

在上面的例子中，ng-model="name" 指令用于将输入框的值与 name 变量进行双向数据绑定，当输入框的值改变时，页面上的表达式也会随之更新。

过滤器

AngularJS 表达式还支持过滤器，用于格式化数据的显示。例如：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>AngularJS 表达式</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>

<div ng-app="">
    <p>今天是 {{ '2022-01-01' | date:'yyyy-MM-dd' }}</p>
</div>

</body>
</html>

在上面的例子中，date 过滤器用于将日期格式化为 yyyy-MM-dd 的形式显示在页面上。

以上就是 AngularJS 表达式的基本用法，通过表达式，我们可以方便地将数据绑定到页面上，并进行格式化显示。