AngularJS-expressies
AngularJS bindt gegevens aan HTML met behulp van Expressions .
AngularJS-expressies
AngularJS-expressies kunnen tussen dubbele accolades worden geschreven: .{{ expression }}
AngularJS-expressies kunnen ook in een richtlijn worden geschreven: .ng-bind="expression"
AngularJS lost de uitdrukking op en retourneert het resultaat precies waar de uitdrukking is geschreven.
AngularJS-expressies lijken veel op JavaScript-expressies: ze kunnen letterlijke waarden, operators en variabelen bevatten.
Voorbeeld {{ 5 + 5 }} of {{ firstName + " " + lastName }}
Voorbeeld
<!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>
Als u de ng-apprichtlijn verwijdert, zal HTML de uitdrukking weergeven zoals deze is, zonder deze op te lossen:
Voorbeeld
<!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>
U kunt uitdrukkingen schrijven waar u maar wilt, AngularJS lost de uitdrukking eenvoudig op en retourneert het resultaat.
Voorbeeld: laat AngularJS de waarde van CSS-eigenschappen wijzigen.
Wijzig de kleur van het onderstaande invoervak door de waarde ervan te wijzigen:
Voorbeeld
<div ng-app="" ng-init="myCol='lightblue'">
<input
style="background-color:{{myCol}}" ng-model="myCol">
</div>
AngularJS-nummers
AngularJS-nummers zijn als JavaScript-nummers:
Voorbeeld
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: {{ quantity * cost }}</p>
</div>
Hetzelfde voorbeeld met ng-bind:
Voorbeeld
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>
</div>
Gebruik ng-initis niet erg gebruikelijk. In het hoofdstuk over controllers leert u een betere manier om gegevens te initialiseren.
AngularJS-snaren
AngularJS-strings zijn als JavaScript-strings:
Voorbeeld
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is {{ firstName + " " + lastName }}</p>
</div>
Hetzelfde voorbeeld met ng-bind:
Voorbeeld
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>
AngularJS-objecten
AngularJS-objecten zijn als JavaScript-objecten:
Voorbeeld
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is {{ person.lastName }}</p>
</div>
Hetzelfde voorbeeld met ng-bind:
Voorbeeld
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is <span ng-bind="person.lastName"></span></p>
</div>
AngularJS-arrays
AngularJS-arrays zijn als JavaScript-arrays:
Voorbeeld
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is {{ points[2] }}</p>
</div>
Hetzelfde voorbeeld met ng-bind:
Voorbeeld
<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-expressies versus JavaScript-expressies
Net als JavaScript-expressies kunnen AngularJS-expressies letterlijke waarden, operators en variabelen bevatten.
In tegenstelling tot JavaScript-expressies, kunnen AngularJS-expressies in HTML worden geschreven.
AngularJS-expressies ondersteunen geen conditionals, loops en exceptions, terwijl JavaScript-expressies dat wel doen.
AngularJS-expressies ondersteunen filters, terwijl JavaScript-expressies dat niet doen.
Leer meer over JavaScript in onze JavaScript-tutorial .