Выражения AngularJS: ARRAY, Objects, $eval, Strings [Примеры]

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

Что такое выражения Angular JS?

Выражения — это переменные, которые были определены в двойных фигурных скобках {{ }}. Они очень часто используются в 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. Мы добавляем простое выражение, которое рассматривает сложение двух чисел.

Если код выполнен успешно, при запуске кода в браузере будет отображен следующий вывод.

Вывод:

Выражения Angular.js

Из вывода,

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

Угловой.JS Numbers

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

В этом примере мы просто хотим показать простое умножение двух числовых переменных, называемых маржой и прибылью, и отобразить их умноженное значение.

Угловой.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. Затем мы используем две локальные переменные и умножаем их значения.

Если код выполнен успешно, при запуске кода в браузере будет отображен следующий вывод.

Вывод:

Угловой.JS Numbers

Из вывода,

  • Хорошо видно, что происходит умножение двух чисел 2 и 2, и отображается умноженное значение 200.

СТАТЬИ ПО ТЕМЕ

Строки AngularJS

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

В этом примере мы собираемся определить две строки «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

Выражения можно использовать для работы с JavaСценарий объекты тоже.

Давайте рассмотрим пример выражений Angular.JS с объектами JavaScript. Объект javascript состоит из пары имя-значение.

Ниже приведен пример синтаксиса объекта javascript.

Синтаксис:

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

В этом примере мы собираемся определить один объект как объект person, который будет иметь две пары значений ключа: «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» и «второе имя» отображаются на экране.

AngularJS Массивы

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

В этом примере мы собираемся определить массив, в котором будут храниться оценки ученика по трем предметам. В представлении мы соответственно отобразим значение этих отметок.

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.
  2. Затем мы используем выражения меток [индекс] для доступа к каждому элементу массива.

Если код выполнен успешно, при запуске кода в браузере будет отображен следующий вывод.

Вывод:

AngularJS Массивы

Из вывода ясно видно, что отображаемые метки определены в массиве.

Возможности и ограничения AngularJS Expression

Возможности выражений Angular.JS

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

Ограничения выражения Angular JS

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

Разница между выражением и $eval

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

Давайте посмотрим на простой пример по этому поводу.

В этом примере

Мы просто собираемся использовать функцию $eval, чтобы добавить два числа и сделать их доступными в объекте области, чтобы их можно было отобразить в представлении.

Разница между выражением и $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. Сначала мы определяем две переменные «a» и «b», каждая из которых имеет значение 2.
  2. Мы используем функцию $scope.$eval для оценки сложения двух переменных и присвоения ее переменной области видимости «значение».
  3. Затем мы просто отображаем значение переменной «value» в представлении.

Если код выполнен успешно, при запуске кода в браузере будет отображен следующий вывод.

Вывод:

Разница между выражением и $eval

Приведенный выше вывод показывает результат выражения, которое было вычислено в контроллер. Приведенные выше результаты показывают, что выражение $eval использовалось для добавления двух переменных области действия «a и b» с результатом, отправленным и отображенным в представлении.

Итого

  • Мы видели, как выражения в Угловой JS может использоваться для оценки регулярного JavaВыражения, подобные скрипту, такие как простое сложение чисел.
  • Директива ng-init может использоваться для встроенного определения переменных, которые можно использовать в представлении.
  • Выражения можно заставить работать с примитивными типами, такими как строки и числа.
  • Выражения также можно использовать для работы с другими типами, такими как JavaСкриптовые объекты и массивы.
  • Выражения в Angular JS имеют несколько ограничений, например, отсутствие регулярных выражений или использование функций, циклов или условных операторов.

Вы могли бы: