AngularJS Expressies

Vorige pagina AngularJS Inleiding
Volgende pagina AngularJS Modules

AngularJS gebruiktExpressieKoppel data aan HTML.

AngularJS Expressies

AngularJS expressies kunnen worden geschreven binnen dubbele accolades:{{ expression }}.

AngularJS expressies kunnen ook binnen directieven worden geschreven:ng-bind="expression".

AngularJS zal expressies interpreteren en het resultaat retourneren op de locatie waar de expressie is geschreven.

AngularJS Expressieszijn erg vergelijkbaar met JavaScript expressiesZij kunnen litterale waarden, operatoren en variabelen bevatten.

Voorbeeld {{ 5 + 5 }} of {{ firstName + " " + lastName }}

Voorbeeld

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
  <p>Mijn eerste expressie: {{ 5 + 5 }}</p>
</div>
</body>
</html>

Probeer het zelf

Als je ng-app Directieven, HTML toont expressies in hun oorspronkelijke vorm zonder deze te interpreteren:

Voorbeeld

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div>
  <p>Mijn eerste expressie: {{ 5 + 5 }}</p>
</div>
</body>
</html>

Probeer het zelf

Je kunt expressies schrijven op elke gewenste locatie, AngularJS zal de expressie eenvoudig interpreteren en het resultaat retourneren.

Voorbeeld: Laat AngularJS de waarde van een CSS-eigenschap wijzigen.

Wijzig de waarde om de kleur van het onderstaande invoerveld te veranderen:

Lichtblauw

Voorbeeld

<div ng-app="" ng-init="myCol='lightblue'">
<input style="background-color:{{myCol}}" ng-model="myCol">
</div>

Probeer het zelf

AngularJS-getallen

AngularJS-getallen zijn net als JavaScript-getallen:

Voorbeeld

<div ng-app="" ng-init="quantity=1;cost=5">
<p>Totaalbedrag (US dollar)：{{ quantity * cost }}</p>
</div>

Probeer het zelf

Gebruik ng-bind Gelijk voorbeeld:

Voorbeeld

<div ng-app="" ng-init="quantity=1;cost=5">
<p>Totaalbedrag (US dollar)：<span ng-bind="quantity * cost"></span></p>
</div>

Probeer het zelf

Het gebruik van ng-init is niet gebruikelijk. Je zult in het hoofdstuk over controllers betere methoden leren om gegevens te initialiseren.

AngularJS-strings

AngularJS-strings zijn net als JavaScript-strings:

Voorbeeld

<div ng-app="" ng-init="firstName='Bill';lastName='Gates'">
<p>Naam is {{ firstName + " " + lastName }}</p>
</div>

Probeer het zelf

Gelijk voorbeeld met ng-bind:

Voorbeeld

<div ng-app="" ng-init="firstName='Bill';lastName='Gates'">
<p>Naam is <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>

Probeer het zelf

AngularJS-objekten

AngularJS-objekten zijn net als JavaScript-objekten:

Voorbeeld

<div ng-app="" ng-init="person={firstName:'Bill',lastName:'Gates'}">
<p>Naam is {{ person.lastName }}</p>
</div>

Probeer het zelf

Gelijk voorbeeld met ng-bind:

Voorbeeld

<div ng-app="" ng-init="person={firstName:'Bill',lastName:'Gates'}">
<p>Naam is <span ng-bind="person.lastName"></span></p>
</div>

Probeer het zelf

AngularJS-arrays

AngularJS-arrays zijn net als JavaScript-arrays:

Voorbeeld

<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>Het derde resultaat is {{ points[2] }}</p>
</div>

Probeer het zelf

Gelijk voorbeeld met ng-bind:

Voorbeeld

<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>Het derde resultaat is <span ng-bind="points[2]"></span></p>
</div>

Probeer het zelf