AngularJS uitdrukkings
AngularJS bind data aan HTML deur gebruik te maak van Expressions .
AngularJS uitdrukkings
AngularJS-uitdrukkings kan binne dubbelhakies geskryf word: .{{ expression }}
AngularJS uitdrukkings kan ook binne 'n direktief geskryf word: .ng-bind="expression"
AngularJS sal die uitdrukking oplos en die resultaat terugstuur presies waar die uitdrukking geskryf is.
AngularJS-uitdrukkings is baie soos JavaScript-uitdrukkings: Hulle kan letterlike, operateurs en veranderlikes bevat.
Voorbeeld {{ 5 + 5 }} of {{ voornaam + " " + achternaam }}
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>
As jy die ng-appopdrag verwyder, sal HTML die uitdrukking vertoon soos dit is, sonder om dit op te los:
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>
Jy kan uitdrukkings skryf waar jy wil, AngularJS sal eenvoudig die uitdrukking oplos en die resultaat terugstuur.
Voorbeeld: Laat AngularJS die waarde van CSS-eienskappe verander.
Verander die kleur van die invoerkassie hieronder deur die waarde daarvan te verander:
Voorbeeld
<div ng-app="" ng-init="myCol='lightblue'">
<input
style="background-color:{{myCol}}" ng-model="myCol">
</div>
AngularJS-nommers
AngularJS-nommers is soos JavaScript-nommers:
Voorbeeld
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: {{ quantity * cost }}</p>
</div>
Dieselfde voorbeeld gebruik 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 nie baie algemeen nie. Jy sal 'n beter manier leer om data te inisialiseer in die hoofstuk oor beheerders.
AngularJS Strings
AngularJS-stringe is soos JavaScript-stringe:
Voorbeeld
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is {{ firstName + " " + lastName }}</p>
</div>
Dieselfde voorbeeld gebruik 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-voorwerpe
AngularJS-objekte is soos JavaScript-objekte:
Voorbeeld
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is {{ person.lastName }}</p>
</div>
Dieselfde voorbeeld gebruik 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-skikkings
AngularJS-skikkings is soos JavaScript-skikkings:
Voorbeeld
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is {{ points[2] }}</p>
</div>
Dieselfde voorbeeld gebruik 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-uitdrukkings vs. JavaScript-uitdrukkings
Soos JavaScript-uitdrukkings, kan AngularJS-uitdrukkings letterlike, operateurs en veranderlikes bevat.
Anders as JavaScript-uitdrukkings, kan AngularJS-uitdrukkings binne HTML geskryf word.
AngularJS-uitdrukkings ondersteun nie voorwaardes, lusse en uitsonderings nie, terwyl JavaScript-uitdrukkings dit wel doen.
AngularJS-uitdrukkings ondersteun filters, terwyl JavaScript-uitdrukkings dit nie doen nie.
Kom meer te wete oor JavaScript in ons JavaScript-tutoriaal .