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 нет.