AngularJS表达式：数组、对象、$eval、字符串
詹姆斯·哈特曼
什么是AngularJS表达式？
表达式是用双花括号括起来的变量。 {{ }}它们在 AngularJS 中非常常用，并且在本系列的早期教程中都有出现。
⚠️ 支持通知： AngularJS 已达到 生命终结日期为2021年12月31日 并且不再接收任何补丁或安全修复。以下语法仍然适用于维护现有的 AngularJS 1.x 应用程序；新项目应使用现代语法。 角度方向，其中插值括号仍然存在，但 ng-init 和 $eval 不要。
用示例解释 AngularJS 表达式
AngularJS表达式写在双花括号内，例如： {{expression}}.
语法： 表达式的一个简单例子是 {{5 + 6}}.
AngularJS 表达式以与 ng-bind 指令相同的方式将数据绑定到 HTML，并且 AngularJS 会将数据准确地显示在表达式所在的位置。
在这个例子中，我们用表达式来表示简单的数字加法。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script> <h1>Guru99 Global Event</h1> <div ng-app=""> Addition : {{6+9}} </div> </body> </html>
Code 说明：
- ng-app 指令为空，这意味着没有模块提供控制器。 指令或为本页面提供服务。
- 一个简单的表达式可以将两个数字相加。
输出：
9 加 6 的结果显示为 15。
AngularJS Numbers
表达式处理的是数字。这个例子将两个数字变量相乘。 margin 和 profit并展示该产品。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.8.3/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>
Code 说明：
- ng-init 指令在视图本身中定义变量及其值，就像任何代码中的局部变量一样。 编程语言。 这里
margin和profit已声明并赋值。 - 然后该表达式将这两个局部变量相乘。
输出：
2 乘以 200，结果为 400。
AngularJS 字符串
表达式也适用于字符串。此示例定义了 firstName 和 lastName 并同时显示两者。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.8.3/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>
Code 说明：
- ng-init 指令定义
firstName值为“Guru“和lastName值为“99”。 - 表达方式
{{firstName}}和{{lastName}}读取这些变量并将它们显示在视图中。
输出：
屏幕上会显示这两个数值。
AngularJS 对象
表达式与 JavaScript 对象由名称-值对组成。语法如下： Java脚本对象如下所示：
var car = {type: "Ford", model: "Explorer", color: "White"};
这个例子定义了一个 person 包含两个键值对的对象， firstName 和 lastName.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.8.3/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>
Code 说明：
- ng-init 指令定义了对象
person使用键值对firstName调成 ”Guru“和lastName设置为“99”。 - 表达方式
{{person.firstName}}和{{person.lastName}}读取这些成员。由于它们属于对象，因此需要使用点号表示法来获取它们的值。
输出：
的价值观 firstName 和 lastName 出现在屏幕上。
AngularJS 数组
表达式可以处理数组。以下示例定义了一个数组，其中包含一名学生三门科目的成绩，并显示每个值。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.8.3/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]}} </div> </body> </html>
Code 说明：
- ng-init 指令定义了数组
marks三个值分别为 1、15 和 19。 - 形如
marks[index]阅读每个元素。
输出：
显示数组中定义的标记。
AngularJS 表达式的功能和限制
能力
- AngularJS表达式类似于 Java脚本表达式与函数具有许多相同的功能和灵活性。
- 地点 Java脚本对未定义的属性引发 ReferenceError 或 TypeError，AngularJS 的执行比较宽容，会返回 undefined 或 null。
- 在表达式中可以使用过滤器来格式化数据，然后再显示数据。
- 支持三元运算符，因此
{{ isReady ? 'Yes' : 'No' }}已验证。
限制
- AngularJS表达式中不能使用循环和异常处理。条件逻辑仅限于三元运算符；
if暂无相关声明。 - 函数不能在表达式中声明，即使是在 ng-init 指令中也不行。
- 正则表达式不能创建在表达式内部。正则表达式是由符号和字符组成的组合，用于匹配字符串，例如：
.*\.txt$这样的字面意思会被拒绝。 - 逗号运算符（
,）和void操作员不得入内。
ng-bind 与表达式大括号：应该使用哪一个？
Double 使用花括号和 ng-bind 指令渲染出的结果相同，因此选择哪一个看起来似乎无关紧要。但事实并非如此。在 AngularJS 加载完成之前，两者的行为有所不同，而这种差异对于页面用户来说是显而易见的。
| 方面 | {{ expression }} | ng-bind |
|---|---|---|
| 写入 | 元素内容 | 元素属性 |
| 在 AngularJS 加载之前 | 原始括号在屏幕上闪烁 | 什么也没显示 |
| 可读性 | 更高——该值处于正常水平 | 较低的值隐藏在属性中 |
| 每个元素有多个值 | 是 | 不，只有一个绑定 |
| 一次性装订 | 是的，有 {{::value}} |
是的，有 ng-bind="::value" |
短暂出现的原始大括号被称为未插值内容的闪现，这是因为浏览器在 AngularJS 编译之前就渲染了标记。对于首屏可见的内容，请使用 ng-bind 指令或添加 ng-cloak 指令。在其他情况下，尤其是当一个元素内包含多个值时，大括号仍然是更清晰易读的选择。
表达式和$eval之间的区别
此 $eval 函数在控制器内部计算表达式。表达式在视图中计算，而 $eval 在控制器代码中进行评估。
这个例子使用 $eval 将两个数字相加，并将结果放在作用域对象上，以便视图可以显示它。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.8.3/angular.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>
Code 说明：
- 两个作用域变量，
a和b每个元素的值都为 1。 $scope.$eval计算它们的和并将结果赋值给作用域变量value.- 然后视图显示
value.
输出：
输出结果显示了表达式在内部的求值情况。 调节器并将两个作用域变量的总和发送到视图中并显示。
