Вирази AngularJS: ARRAY, об’єкти, $eval, рядки [Приклади]

Автор: Джеймс Гартман Джеймс Гартман
Hours оновлений

Що таке Angular JS Expressions?

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

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

Вирази AngularJS записуються в подвійних дужках {{expression}}.

Синтаксис:

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

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

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

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

Вирази 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>

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

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

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

вихід:

Вирази Angular.js

З виходу,

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

Angular.JS Numbers

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

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

Angular.JS Numbers

<!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>

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

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

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

вихід:

Angular.JS Numbers

З виходу,

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

СТАТТІ ПО ТЕМІ

Рядки AngularJS

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

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

Рядки AngularJS

<!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'">

        &nbsp;&nbsp;&nbsp;
        First Name : {{firstName}}<br>&nbsp;&nbsp;&nbsp;
        last Name : {{lastName}}

    </div>

</body>
</html>

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

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

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

вихід:

Рядки AngularJS

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

Об’єкти Angular.JS

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

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

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

Синтаксис:

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

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

Об’єкти 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="person={firstName:'Guru',lastName:'99'}">

    &nbsp;&nbsp;&nbsp;
    First Name : {{person.firstName}}<br>&nbsp;&nbsp;&nbsp;
    Last Name : {{person.lastName}}

</div>

</body>
</html>

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

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

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

вихід:

Об’єкти Angular.JS

З виходу,

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

Масиви AngularJS

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

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

Масиви AngularJS

<!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>&nbsp;&nbsp;&nbsp;
    Subject1 : {{marks[0] }}<br>&nbsp;&nbsp;&nbsp;
    Subject2 : {{marks[1] }}<br>&nbsp;&nbsp;&nbsp;
    Subject3 : {{marks[2] }}<br>&nbsp;&nbsp;&nbsp;
</div>

</body>
</html>

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

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

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

вихід:

Масиви AngularJS

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

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

Можливості Angular.JS Expression

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

Обмеження Angular JS Expression

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

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

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

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

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

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

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

<!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>

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

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

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

вихід:

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

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

Підсумки

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