Выражения AngularJS: ARRAY, объекты, $ eval, строки (примеры)

Содержание:

Anonim

Что такое Angular JS Expressions?

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

В этом руководстве вы узнаете:

  • Объяснение выражений Angular.js на примере
  • Номера AngularJS
  • Строки AngularJS
  • Объекты AngularJS
  • Массивы AngularJS
  • Возможности и ограничения AngularJS Expression
  • Разница между выражениями и $ 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. Мы добавляем простое выражение, которое смотрит на сложение двух чисел.

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

Выход:

На выходе

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

Номера Angular.JS

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

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

Event Registration

Guru99 Global Event


Total profit margin{{margin*profit}}

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

  1. Директива ng-init используется в angular.js для определения переменных и их соответствующих значений в самом представлении. Это что-то вроде определения локальных переменных для кода на любом языке программирования. В этом случае мы определяем 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"};

В этом примере мы собираемся определить один объект как объект person, который будет иметь 2 пары значений ключа «firstName» и «lastName».

Event Registration

Guru99 Global Event


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

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

  1. Директива ng-init используется для определения объекта person, который, в свою очередь, имеет пары значений ключа firstName со значением «Guru» и переменной lastName со значением «99».
  2. Затем мы используем выражения {{person.firstName}} и {{person.secondName}}, чтобы получить доступ к значениям этих переменных и соответствующим образом отобразить их в представлении. Поскольку фактические переменные-члены являются частью объекта person, они должны обращаться к нему с помощью записи с точкой (.), Чтобы получить доступ к их фактическому значению.

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

Выход:

На выходе

  • Хорошо видно, что значения 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 используется для определения массива с именем «mark» с 3 значениями: 1, 15 и 19.
  2. Затем мы используем выражения mark [index] для доступа к каждому элементу массива.

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

Выход:

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

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

Возможности Angular.JS Expression

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

Ограничения Angular JS Expression

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

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

Выход:

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

Резюме:

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