Последние учебники веб-разработки
 

AngularJS Выражения


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


AngularJS Выражения

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

AngularJS выражения могут быть записаны внутри директивы: ng-bind=" expression " .

AngularJS разрешит выражение, и возвращает результат именно там, где написано выражение.

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

Пример {{5 + 5}} или {{FirstName + "" + LastName}}

пример

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/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="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/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" value="{{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 нет.