Выражения AngularJS
AngularJS привязывает данные к HTML с помощью выражений .
Выражения AngularJS
Выражения AngularJS можно записывать внутри двойных фигурных скобок: .{{ expression }}
Выражения AngularJS также могут быть записаны внутри директивы: .ng-bind="expression"
AngularJS разрешит выражение и вернет результат именно там, где выражение написано.
Выражения AngularJS очень похожи на выражения JavaScript: они могут содержать литералы, операторы и переменные.
Пример {{ 5 + 5 }} или {{ firstName + " " + lastName }}
Пример
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
Если вы удалите ng-appдирективу, HTML отобразит выражение как есть, не решая его:
Пример
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div>
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
Вы можете писать выражения где угодно, AngularJS просто разрешит выражение и вернет результат.
Пример: пусть AngularJS изменит значение свойств CSS.
Измените цвет поля ввода ниже, изменив его значение:
Пример
<div ng-app="" ng-init="myCol='lightblue'">
<input
style="background-color:{{myCol}}" ng-model="myCol">
</div>
Номера AngularJS
Числа AngularJS похожи на числа JavaScript:
Пример
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: {{ quantity * cost }}</p>
</div>
Тот же пример с использованием ng-bind:
Пример
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>
</div>
Использование ng-initне очень распространено. Вы узнаете лучший способ инициализации данных в главе о контроллерах.
Строки AngularJS
Строки AngularJS похожи на строки JavaScript:
Пример
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is {{ firstName + " " + lastName }}</p>
</div>
Тот же пример с использованием ng-bind:
Пример
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>
Объекты AngularJS
Объекты AngularJS похожи на объекты JavaScript:
Пример
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is {{ person.lastName }}</p>
</div>
Тот же пример с использованием ng-bind:
Пример
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is <span ng-bind="person.lastName"></span></p>
</div>
AngularJS Массивы
Массивы AngularJS похожи на массивы JavaScript:
Пример
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is {{ points[2] }}</p>
</div>
Тот же пример с использованием ng-bind:
Пример
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is <span ng-bind="points[2]"></span></p>
</div>
Выражения AngularJS против выражений JavaScript
Как и выражения JavaScript, выражения AngularJS могут содержать литералы, операторы и переменные.
В отличие от выражений JavaScript, выражения AngularJS можно писать внутри HTML.
Выражения AngularJS не поддерживают условные операторы, циклы и исключения, в отличие от выражений JavaScript.
Выражения AngularJS поддерживают фильтры, а выражения JavaScript — нет.
Узнайте о JavaScript в нашем учебном пособии по JavaScript .