AngularJS Выражения


AngularJS ИспользованиеВыраженияПривязка данных к HTML.


}}

AngularJS выражения записываются внутри двойных фигурных скобок:{{ expression }}。

AngularJS выражения привязывают данные к HTML, чтоng-bindпохоже на то, как работают директивы.

AngularJS будет "выводить" данные в позиции, где записано выражение.

Выражения AngularJSочень похожи навыражения JavaScript: Они могут содержать литералы, операторы и переменные.

Пример: {{ 5 + 5 }} или {{ firstName + " " + lastName }}

Пример AngularJS

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://cdn.static.example.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app=""> <p>Моё первое выражение: {{ 5 + 5 }}</p> </div> </body> </html>

Попробуйте сами »

Числа AngularJS

Числа AngularJS похожи на числа JavaScript:

Пример AngularJS

<div ng-app="" ng-init="quantity=1;cost=5"> <p>Общая цена: {{ quantity * cost }}</p> </div>

Попробуйте сами »

Тот же пример с использованием ng-bind:

Пример AngularJS

<div ng-app="" ng-init="quantity=1;cost=5"> <p>Общая цена:<span ng-bind="quantity * cost"></span></p> </div>

Попробуйте сами »

Note Использованиеng-initне очень распространено. Вы узнаете лучший способ инициализации данных в главе о контроллерах.

Строки в AngularJS

Строки в AngularJS похожи на строки в JavaScript:

Пример AngularJS

<div ng-app="" ng-init="firstName='John';lastName='Doe'"> <p>Имя: {{ firstName + " " + lastName }}</p> </div>

Попробуйте сами »

Тот же пример с использованием ng-bind:

Пример AngularJS

<div ng-app="" ng-init="firstName='John';lastName='Doe'"> <p>Имя:<span ng-bind="firstName + ' ' + lastName"></span></p> </div>

Попробуйте сами »


Объекты в AngularJS

Объекты в AngularJS похожи на объекты в JavaScript:

Пример AngularJS

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"> <p>Фамилия — {{ person.lastName }}</p> </div>

Попробуйте сами »

Тот же пример с использованием ng-bind:

Пример AngularJS

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"> <p>Фамилия:<span ng-bind="person.lastName"></span></p> </div>

Попробуйте сами »


Массивы AngularJS

Массивы AngularJS похожи на массивы JavaScript:

Пример AngularJS

<div ng-app="" ng-init="points=[1,15,19,2,40]"> <p>Третье значение: {{ points</p> </div>

Попробуйте сами »

Тот же пример с использованием ng-bind:

Пример AngularJS

<div ng-app="" ng-init="points=[1,15,19,2,40]"> <p>Третье значение:<span ng-bind="points[2]"></span></p> </div>

Попробуйте сами »

Выражения AngularJS и выражения JavaScript

Как и выражения JavaScript, выражения AngularJS могут содержать буквы, операторы и переменные.

В отличие от выражений JavaScript, выражения AngularJS можно записывать в HTML.

В отличие от выражений JavaScript, выражения AngularJS не поддерживают условные операторы, циклы или исключения.

В отличие от выражений JavaScript, выражения AngularJS поддерживают фильтры.

Другие расширения