AngularJS Udtryk

Forrige side AngularJS Introduktion
Næste side AngularJS Moduler

AngularJS gør det gennemUdtrykBind data til HTML.

AngularJS Udtryk

AngularJS-udtryk kan skrives inden for dobbelte curly parenteser:{{ expression }}.

AngularJS-udtryk kan også skrives i instruktioner:ng-bind="expression".

AngularJS analyserer udtrykket og returnerer resultatet på stedet, hvor udtrykket er skrevet.

AngularJS Udtrykligner JavaScript-udtryk：De kan indeholde litterale værdier, operatorer og variabler.

Eksempel {{ 5 + 5 }} eller {{ firstName + " " + lastName }}

eksempel

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
  <p>Min første udtryk: {{ 5 + 5 }}</p>
</div>
</body>
</html>

Prøv det selv

Hvis du fjerner ng-app Instruktioner, HTML viser udtrykket som det er, uden at analysere det:

eksempel

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div>
  <p>Min første udtryk: {{ 5 + 5 }}</p>
</div>
</body>
</html>

Prøv det selv

Du kan skrive udtryk på din foretrukne placering, og AngularJS vil simpelt hen analysere udtrykket og returnere resultatet.

Eksempel: Lad AngularJS ændre værdien af en CSS-egenskab.

Ændr værdien for at ændre farven på nedenstående inputfelt:

Lysblå

eksempel

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

Prøv det selv

AngularJS tal

AngularJS tal ligner JavaScript tal:

eksempel

<div ng-app="" ng-init="quantity=1;cost=5">
<p>Samlet beløb (dollar): {{ quantity * cost }}</p>
</div>

Prøv det selv

Brug ng-bind Lignende eksempel:

eksempel

<div ng-app="" ng-init="quantity=1;cost=5">
<p>Samlet beløb (dollar): <span ng-bind="quantity * cost"></span></p>
</div>

Prøv det selv

Brug af ng-init er ikke særligt almindeligt. Du vil lære bedre metoder til at initialisere data i kapitlet om kontroller.

AngularJS strenge

AngularJS strenge ligner JavaScript strenge:

eksempel

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

Prøv det selv

En lignende eksempel med ng-bind:

eksempel

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

Prøv det selv

AngularJS objekter

AngularJS objekter ligner JavaScript objekter:

eksempel

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

Prøv det selv

En lignende eksempel med ng-bind:

eksempel

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

Prøv det selv

AngularJS arrays

AngularJS arrays ligner JavaScript arrays:

eksempel

<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>Det tredje resultat er {{ points[2] }}</p>
</div>

Prøv det selv

En lignende eksempel med ng-bind:

eksempel

<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>Det tredje resultat er <span ng-bind="points[2]"></span></p>
</div>

Prøv det selv