Вирази AngularJS: масиви, об'єкти, $eval, рядки
Джеймс Гартман
⚡ Розумний підсумок
Вирази AngularJS – це фрагменти коду, поміщені в подвійні дужки, які безпосередньо зв'язують дані з шаблоном. Вони обчислюють числа, рядки, об'єкти та масиви, а функція $eval виконує ту саму обчислення зсередини контролера.
Що таке вирази AngularJS?
Вирази – це змінні, записані всередині подвійних дужок {{ }}Вони дуже часто використовуються в AngularJS та з'являються в попередніх навчальних посібниках цієї серії.
⚠️ Повідомлення служби підтримки: Досягнуто AngularJS кінець терміну служби 31 грудня 2021 року і не отримує подальших виправлень чи виправлень безпеки. Наведений нижче синтаксис залишається точним для підтримки існуючих програм AngularJS 1.x; нові проекти повинні використовувати сучасні Angular, де інтерполяційні дужки все ще існують, але ng-init та $eval не робити.
Поясніть вирази AngularJS на прикладі
Вирази AngularJS записуються всередині подвійних дужок, як у {{expression}}.
Синтаксис: простий приклад виразу - {{5 + 6}}.
Вирази AngularJS прив'язують дані до HTML так само, як і директива ng-bind, і 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"};
Цей приклад визначає a 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 Expression
Можливості
- Вирази AngularJS нагадують JavaВирази сценаріїв мають багато однакових можливостей та гнучкості.
- де JavaСкрипт викликає ReferenceError або TypeError для властивості undefined, обчислення 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.
вихід:
Вивід показує вираз, обчислений всередині контролер, із сумою двох змінних області видимості, що надсилаються та відображаються у поданні.
