AngularJS 表达式：ARRAY、对象、$eval、字符串 [示例]
詹姆斯·哈特曼
什么是 Angular JS 表达式？
表达式是在双括号 {{ }} 中定义的变量。它们在 Angular JS 中非常常用，您可以在我们之前的教程中看到它们。
用一个例子解释 Angular.js 表达式
AngularJS 表达式是写在双括号 {{expression}} 内的表达式。
语法：
表达式的一个简单示例是{{5 + 6}}。
Angular.JS 表达式用于将数据绑定到 HTML，方式与 ng-bind 指令相同。AngularJS 会在表达式所在的位置准确显示数据。
让我们看一个 Angular.JS 表达式的例子。
在这个例子中，我们只想将数字的简单加法显示为一个表达式。
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="">
Addition : {{6+9}}
</div>
</body>
</html>
代码说明：
- 如上图所示，我们示例中的 ng-app 指令为空。这仅表示没有模块可以分配控制器， 指令，附加到代码的服务。
- 我们正在添加一个简单的表达式，它计算两个数字的加法。
如果代码成功执行，则在浏览器中运行代码时将显示以下输出。
输出：
从输出来看，
- 可以看出，9 和 6 两个数字进行了加法运算，并显示了加法结果 15。
角度.JS Numbers
表达式也可用于处理数字。让我们看一个带有数字的 Angular.JS 表达式的示例。
在这个例子中，我们只想显示两个数字变量（即保证金和利润）的简单乘法，并显示它们的乘积值。
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="" ng-init="margin=2;profit=200">
Total profit margin
{{margin*profit}}
</div>
</body>
</html>
代码说明：
- ng-init 指令用于在 angular.js 中定义视图本身中的变量及其对应的值。这有点像在任何代码中定义局部变量 编程语言在本例中，我们定义了两个变量，分别称为 margin 和 profits，并给它们赋值。
- 然后我们使用这两个局部变量并将它们的值相乘。
如果代码成功执行，则在浏览器中运行代码时将显示以下输出。
输出：
从输出来看，
- 可以清楚的看到，2 个数字 2 和 200 发生了乘法，并显示了乘积值 400。
AngularJS 字符串
表达式也可用于处理字符串。让我们看一个带有字符串的 Angular JS 表达式的示例。
在这个例子中，我们将定义两个字符串“firstName”和“lastName”，并使用相应的表达式显示它们。
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="" ng-init="firstName='Guru';lastName='99'">
First Name : {{firstName}}<br>
last Name : {{lastName}}
</div>
</body>
</html>
代码说明：
- ng-init 指令用于定义变量 firstName 的值为“Guru”，以及变量 lastName 的值为“99”。
- 然后我们使用 {{firstName}} 和 {{lastName}} 表达式来访问这些变量的值并相应地在视图中显示它们。
如果代码成功执行，则在浏览器中运行代码时将显示以下输出。
输出：
从输出中可以清楚的看到firstName和lastName的值显示在屏幕上。
Angular.JS 对象
表达式可用于处理 JavaScript 对象也是如此。
让我们看一个带有 javascript 对象的 Angular.JS 表达式示例。javascript 对象由名称-值对组成。
下面是 javascript 对象语法的示例。
语法：
var car = {type:"Ford", model:"Explorer", color:"White"};
在这个例子中，我们将把一个对象定义为一个 person 对象，它将具有 2 个键值对“firstName”和“lastName”。
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="" ng-init="person={firstName:'Guru',lastName:'99'}">
First Name : {{person.firstName}}<br>
Last Name : {{person.lastName}}
</div>
</body>
</html>
代码说明：
- ng-init 指令用于定义对象 person，该对象又具有键值对 firstName 的值为“Guru”，以及变量 lastName 的值为“99”。
- 然后我们使用 {{person.firstName}} 和 {{person.secondName}} 表达式来访问这些变量的值并相应地在视图中显示它们。由于实际成员变量是对象 person 的一部分，因此它们必须使用点 (.) 符号来访问它才能访问它们的实际值。
如果代码成功执行，则在浏览器中运行代码时将显示以下输出。
输出：
从输出来看，
- 可以清楚的看到屏幕上显示了“firstName”和“secondName”的值。
AngularJS 数组
表达式也可用于处理数组。让我们看一个带有数组的 Angular JS 表达式的示例。
在这个例子中，我们将定义一个数组来保存学生在 3 个科目的成绩。在视图中，我们将相应地显示这些分数的值。
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="" ng-init="marks=[1,15,19]">
Student Marks<br>
Subject1 : {{marks[0] }}<br>
Subject2 : {{marks[1] }}<br>
Subject3 : {{marks[2] }}<br>
</div>
</body>
</html>
代码说明：
- ng-init 指令用于定义名为“marks”的数组，其有 3 个值，分别为 1、15 和 19。
- 然后我们使用标记 [索引] 表达式来访问数组的每个元素。
如果代码成功执行，则在浏览器中运行代码时将显示以下输出。
输出：
从输出中可以清楚地看到所显示的标记是在数组中定义的。
AngularJS 表达式的功能和限制
Angular.JS 表达式功能
- Angular 表达式就像 Java脚本表达式。因此，它具有相同的功能和灵活性。
- In Java脚本，当您尝试评估未定义的属性时，它会生成 ReferenceError 或 TypeError。在 Angular 中，表达式评估是宽容的，并生成未定义或 null。
- 在显示数据之前，可以使用表达式中的过滤器来格式化数据。
Angular JS 表达式的限制
- 目前无法在 Angular 表达式中使用条件、循环或异常
- 您不能在 Angular 表达式中声明函数，即使在 ng-init 指令内也是如此。
- 无法在 Angular 表达式中创建正则表达式。正则表达式是符号和字符的组合，用于查找字符串，例如 .*\.txt$。此类表达式无法在 Angular JS 表达式中使用。
- 此外，在 Angular 表达式中不能使用 或 void。
表达式和$eval之间的区别
$eval 函数允许在控制器内部评估表达式。因此，虽然表达式用于视图中的评估，但 $eval 却用于控制器函数中。
让我们看一个简单的例子。
在这个例子中，
我们将使用 $eval 函数将 2 个数字相加，并使其在范围对象中可用，以便它可以在视图中显示。
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div ng-app="sampleApp" ng-controller="AngularController">
<h1> Guru99 Global Event</h1>
{{value}}
</div>
<script>
var sampleApp = angular.module('sampleApp',[]);
sampleApp.controller('AngularController',function($scope){
$scope.a=1;
$scope.b=1;
$scope.value=$scope.$eval('a+b');
});
</script>
</body>
</html>
代码说明：
- 我们首先定义两个变量“a”和“b”，每个变量的值都是 2。
- 我们使用 $scope.$eval 函数来评估两个变量的加法并将其分配给范围变量“value”。
- 然后我们只是在视图中显示变量“value”的值。
如果代码成功执行，则在浏览器中运行代码时将显示以下输出。
输出：
上面的输出显示了在 调节器. 以上结果表明，使用 $eval 表达式执行了 2 个范围变量“a 和 b”的加法，并将结果发送并显示在视图中。
总结
- 我们已经看到了 Angular JS 可用于评估定期 Java脚本类似的表达式，例如简单的数字加法。
- ng-init 指令可用于定义可在视图中使用的内联变量。
- 表达式可以与字符串和数字等原始类型一起使用。
- 表达式还可以用于其他类型，例如 Java脚本对象和数组。
- Angular JS 中的表达式确实有一些限制，例如不能有正则表达式或使用函数、循环或条件语句。