Вирази AngularJS: ARRAY, Objects, $ eval, Strings (Приклади)

Зміст:

Anonim

Що таке кутові вирази JS?

Вирази - це змінні, які були визначені у подвійних фігурних дужках {{}}. Вони дуже часто використовуються в Angular JS, і ви б побачили їх у наших попередніх підручниках.

У цьому підручнику ви дізнаєтесь-

  • Поясніть вирази Angular.js на прикладі
  • AngularJS Numbers
  • Рядки AngularJS
  • Об'єкти AngularJS
  • Масиви AngularJS
  • Можливості та обмеження виразу AngularJS
  • Різниця між виразами та $ eval

Поясніть на прикладі вирази Angular.js

Вирази AngularJS - це ті, що записані всередині подвійних фігурних дужок {{вираз}}.

Синтаксис:

Простим прикладом виразу є {{5 + 6}}.

Вирази Angular.JS використовуються для прив'язки даних до HTML так само, як директива ng-bind. AngularJS відображає дані точно в тому місці, де розміщений вираз.

Давайте розглянемо приклад виразів Angular.JS.

У цьому прикладі ми просто хочемо показати просте додавання чисел як вираз.

Event Registration

Guru99 Global Event


Addition : {{6+9}}

Пояснення коду:

  1. Директива ng-app у нашому прикладі пуста, як показано на скріншоті вище. Це означає лише відсутність модуля для призначення контролерів, директив та служб, приєднаних до коду.
  2. Ми додаємо простий вираз, який розглядає додавання 2 чисел.

Якщо код виконано успішно, під час запуску коду в браузері буде показано наступний результат.

Вихід:

З виходу,

  • Видно, що відбувається додавання двох чисел 9 і 6, і відображається додана вартість 15.

Номери JS

Вирази також можна використовувати для роботи з числами. Давайте розглянемо приклад виразів Angular.JS із числами.

У цьому прикладі ми просто хочемо показати просте множення 2 числових змінних, які називаються маржа та прибуток, і відобразити їх помножене значення.

Event Registration

Guru99 Global Event


Total profit margin{{margin*profit}}

Пояснення коду:

  1. Директива ng-init використовується в angular.js для визначення змінних та відповідних їм значень у самому поданні. Це дещо схоже на визначення локальних змінних для кодування на будь-якій мові програмування. У цьому випадку ми визначаємо 2 змінні, які називаються маржа та прибуток, і присвоюємо їм значення.
  2. Потім ми використовуємо 2 локальні змінні та множимо їх значення.

Якщо код виконано успішно, під час запуску коду в браузері буде показано наступний результат.

Вихід:

З виходу,

  • Чітко видно, що відбувається множення 2 чисел 2 і 200, і відображається помножене значення 400.

Рядки AngularJS

Вирази також можна використовувати для роботи зі рядками. Давайте розглянемо приклад Angular JS-виразів із рядками.

У цьому прикладі ми збираємося визначити 2 рядки "firstName" та "lastName" і відобразити їх, використовуючи вирази відповідно.

Event Registration

Guru99 Global Event


   First Name : {{firstName}}
   last Name : {{lastName}}

Пояснення коду:

  1. Використовується директива ng-init, визначають змінні firstName зі значенням "Guru" та змінну lastName зі значенням "99".
  2. Потім ми використовуємо вирази {{firstName}} та {{lastName}}, щоб отримати доступ до значення цих змінних та відобразити їх у поданні відповідно.

Якщо код виконано успішно, під час запуску коду в браузері буде показано наступний результат.

Вихід:

З результатів видно, що значення firstName та lastName відображаються на екрані.

Angular.JS Об'єкти

Вирази також можна використовувати для роботи з об'єктами JavaScript.

Давайте розглянемо приклад виразів Angular.JS з об’єктами javascript. Об'єкт javascript складається з пари ім'я-значення.

Нижче наведено приклад синтаксису об’єкта javascript.

Синтаксис:

var car = {type:"Ford", model:"Explorer", color:"White"};

У цьому прикладі ми збираємось визначити один об’єкт як об’єкт людини, який матиме 2 пари значень ключа „firstName” та „lastName”.

Event Registration

Guru99 Global Event


   First Name : {{person.firstName}}
   Last Name : {{person.lastName}}

Пояснення коду:

  1. Директива ng-init використовується для визначення об'єктної особи, яка в свою чергу має пари значень ключа firstName зі значенням "Guru" та змінною lastName зі значенням "99".
  2. Потім ми використовуємо вирази {{person.firstName}} та {{person.secondName}}, щоб отримати доступ до значення цих змінних та відобразити їх у поданні відповідно. Оскільки фактичні змінні члени є частиною об'єктної особи, вони мають отримати доступ до неї із позначкою крапка (.), Щоб отримати доступ до їх фактичного значення.

Якщо код виконано успішно, під час запуску коду в браузері буде показано наступний результат.

Вихід:

З виходу,

  • Видно чітко, що значення "firstName" та "secondName" відображаються на екрані.

Масиви AngularJS

Вирази також можна використовувати для роботи з масивами. Давайте розглянемо приклад Angular JS-виразів з масивами.

У цьому прикладі ми будемо визначати масив, який буде містити оцінки студента з 3 предметів. У поданні ми відповідно відобразимо значення цих марок.

Event Registration

Guru99 Global Event


Student Marks
   Subject1 : {{marks[0] }}
   Subject2 : {{marks[1] }}
   Subject3 : {{marks[2] }}
   

Пояснення коду:

  1. Використовується директива ng-init, визначає масив з ім'ям "позначки" з 3 значеннями 1, 15 і 19.
  2. Потім ми використовуємо вирази знаків [index] для доступу до кожного елемента масиву.

Якщо код виконано успішно, під час запуску коду в браузері буде показано наступний результат.

Вихід:

З результату видно, що відображаються позначки, які визначені в масиві.

Можливості та обмеження виразу AngularJS

Можливості вираження Angular.JS

  1. Кутові вирази схожі на вирази JavaScript. Отже, він має однакову потужність і гнучкість.
  2. У JavaScript при спробі оцінити невизначені властивості він генерує ReferenceError або TypeError. У Angular оцінка виразу прощає і генерує невизначене або нульове значення.
  3. Можна використовувати фільтри у виразах для форматування даних перед їх відображенням.

Обмеження кутового вираження JS

  1. Наразі немає можливості використовувати умови, цикли або винятки у виразі Angular
  2. Ви не можете оголосити функції у виразі Angular, навіть всередині директиви ng-init.
  3. Не можна створювати регулярні вирази у виразі Angular. Регулярний вираз - це поєднання символів та символів, які використовуються для пошуку таких рядків, як. * \. Txt $. Такі вирази не можна використовувати в виразах Angular JS.
  4. Крім того, не можна використовувати або анулювати в виразі Angular.

Різниця між виразом та $ eval

Функція $ eval дозволяє оцінювати вирази з самого контролера. Отже, хоча вирази використовуються для оцінки у поданні, $ eval використовується у функції контролера.

Давайте розглянемо простий приклад з цього приводу.

У цьому прикладі

Ми просто будемо використовувати функцію $ eval, щоб додати 2 числа і зробити її доступною в об'єкті сфери, щоб вона могла відображатися у поданні.

Event Registration


Guru99 Global Event

{{value}}

Пояснення коду:

  1. Спочатку ми визначаємо 2 змінні "a" і "b", кожна з яких має значення 1.
  2. Ми використовуємо функцію $ scope. $ Eval для оцінки додавання 2 змінних та присвоєння її змінній обсягу 'value'.
  3. Потім ми просто відображаємо значення змінної 'value' у поданні.

Якщо код виконано успішно, під час запуску коду в браузері буде показано наступний результат.

Вихід:

Наведений вище результат показує результат виразу, який оцінювався в контролері. Наведені вище результати показують, що вираз $ eval був використаний для додавання 2 змінних області дії "a і b" з результатом, надісланим і відображеним у поданні.

Короткий зміст:

  • Ми бачили, як вирази в Angular JS можна використовувати для оцінки регулярних JavaScript-подібних виразів, таких як просто додавання чисел.
  • Директива ng-init може бути використана для визначення змінних в рядку, які можна використовувати у поданні.
  • Вирази можна створювати для роботи з примітивними типами, такими як рядки та числа.
  • Вирази також можна використовувати для роботи з іншими типами, такими як об'єкти JavaScript та масиви.
  • Вирази в Angular JS мають кілька обмежень, таких як, наприклад, відсутність регулярних виразів або використання функцій, циклів або умовних операторів.