AngularJS uttryck

AngularJS använderUttryckbinda data till HTML.

AngularJS uttryck

AngularJS-uttryck kan skrivas inom dubbla klamrar:{{ expression }}.

AngularJS-uttryck kan också skrivas inom anvisningar:ng-bind="expression".

AngularJS kommer att analysera uttrycket och returnera resultatet på plats där uttrycket skrivs.

AngularJS uttryckliken JavaScript-uttryck：De kan innehålla litterala värden, operatorer och variabler.

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

Exempel

<!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örsta uttryck: {{ 5 + 5 }}</p>
</div>
</body>
</html>

Prova själv

Om du tar bort ng-app Anvisningar, HTML visar uttrycket i sin ursprungliga form utan att analysera det:

Exempel

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

Prova själv

Du kan skriva uttryck på valfritt ställe, AngularJS kommer att enkelt analysera uttrycket och returnera resultatet.

Exempel: Låt AngularJS ändra värdet på en CSS-attribut.

Ändra färgen på följande inmatningsfält genom att ändra dess värde:

Ljust blått

Exempel

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

Prova själv

AngularJS-nummer

AngularJS-nummer liknar JavaScript-nummer:

Exempel

<div ng-app="" ng-init="quantity=1;cost=5">
<p>Totalt belopp (dollar): {{ quantity * cost }}</p>
</div>

Prova själv

Använd ng-bind Samma exempel:

Exempel

<div ng-app="" ng-init="quantity=1;cost=5">
<p>Totalt belopp (dollar): <span ng-bind="quantity * cost"></span></p>
</div>

Prova själv

Användning av ng-init är inte så vanligt. Du kommer att lära dig bättre metoder för att initiera data i avsnittet om kontroller.

AngularJS-strängar

AngularJS-strängar liknar JavaScript-strängar:

Exempel

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

Prova själv

Samma exempel med ng-bind:

Exempel

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

Prova själv

AngularJS-objekt

AngularJS-objekt liknar JavaScript-objekt:

Exempel

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

Prova själv

Samma exempel med ng-bind:

Exempel

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

Prova själv

AngularJS-arrayer

AngularJS-arrayer liknar JavaScript-arrayer:

Exempel

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

Prova själv

Samma exempel med ng-bind:

Exempel

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

Prova själv

AngularJS-expressioner och JavaScript-expressioner

Liknande JavaScript-expressioner kan AngularJS-expressioner innehålla litterala värden, operatorer och variabler.

I motsats till JavaScript-expressioner kan AngularJS-expressioner skrivas inuti HTML.

AngularJS-expressioner stöder inte villkorssatser, loopar och undantag, medan JavaScript-expressioner gör det.

AngularJS-expressioner stöder filter, medan JavaScript-expressioner inte gör det.

Lär dig mer om JavaScript i vår JavaScript tutorial.