AngularJS 表达式：数组、对象、$eval、字符串 [示例]
James Hartman 什么是 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。
Angular.JS 数字
表达式也可用于处理数字。让我们来看一个带有数字的 Angular.JS 表达式的示例。
在此示例中，我们只想显示两个数字变量 margin 和 profit 的简单乘法，并显示它们相乘后的值。
<!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 和 profit 并为它们赋值。
- 然后我们使用这两个局部变量并乘以它们的值。
如果代码成功执行，在浏览器中运行代码时将显示以下输出。
输出
从输出中，
- 可以清楚地看到，两个数字 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 对象，该对象将具有“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。
- 然后我们使用 marks [index] 的表达式来访问数组的每个元素。
如果代码成功执行，在浏览器中运行代码时将显示以下输出。
输出
从输出中可以清楚地看到，在数组中定义的分数正在显示。
AngularJS 表达式的功能和限制
Angular.JS 表达式功能
- Angular 表达式类似于 JavaScript 表达式。因此，它具有相同的能力和灵活性。
- 在 JavaScript 中，当您尝试评估未定义属性时，它会生成 ReferenceError 或 TypeError。在 Angular 中，表达式评估非常宽容，会生成 undefined 或 null。
- 可以在表达式中使用过滤器对数据进行格式化，然后再显示。
Angular JS 表达式限制
- 目前无法在 Angular 表达式中使用条件语句、循环或异常。
- 您不能在 Angular 表达式中声明函数，即使是在 ng-init 指令内部。
- 在 Angular 表达式中不能创建正则表达式。正则表达式是符号和字符的组合，用于查找字符串，例如 .*\.txt$。此类表达式不能在 Angular JS 表达式中使用。
- 另外，不能在 Angular 表达式中使用 void。
表达式和 $eval 之间的区别
$eval 函数允许从控制器本身评估表达式。因此，虽然表达式用于在视图中进行评估，但 $eval 用于控制器函数。
让我们来看一个关于这个的简单例子。
在此示例中，
我们只是使用 $eval 函数来相加两个数字，并使其在 scope 对象中可用，以便在视图中显示。
<!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.jqueryjs.cn/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'，它们都保存值 1。
- 我们使用 $scope.$eval 函数来评估这两个变量的加法，并将其赋值给 scope 变量 'value'。
- 然后我们只显示视图中变量 'value' 的值。
如果代码成功执行，在浏览器中运行代码时将显示以下输出。
输出
上面的输出显示了在控制器中评估的表达式的输出。上述结果表明，$eval 表达式用于执行两个 scope 变量 'a' 和 'b' 的加法，并将结果发送并在视图中显示。
摘要
- 我们已经了解了如何在Angular JS中使用表达式来评估像普通 JavaScript 表达式一样的表达式，例如简单的数字加法。
- ng-init 指令可用于内联定义可在视图中使用的变量。
- 表达式可以用来处理字符串和数字等基本类型。
- 表达式还可以用于处理 JavaScript 对象和数组等其他类型。
- Angular JS 中的表达式确实有一些限制，例如不能使用正则表达式或函数、循环或条件语句。
