AngularJS se leagă de date HTML folosind expresii.
Expresii AngularJS
AngularJS expresii pot fi scrise în interiorul acolade duble: {{ expression }} .
AngularJS expresii pot fi , de asemenea , în interiorul unei directive: ng-bind=" expression " .
AngularJS va rezolva expresia, și să se întoarcă rezultatul exact acolo unde expresia este scrisă.
AngularJS expresii sunt la fel ca expresii JavaScript: Ele pot conține valori literale, operatori, și variabile.
Exemplul {{5 + 5}} sau {{firstName + " " + lastName}}
Exemplu
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
Încearcă - l singur » Dacă eliminați ng-app directivă, HTML va afișa expresia așa cum este, fără a rezolva aceasta:
Exemplu
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div>
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
Încearcă - l singur » Puteți scrie expresii oriunde doriți, AngularJS va rezolva pur și simplu expresia și returnează rezultatul.
Exemplu: să AngularJS modificați valoarea proprietăților CSS.
Schimbarea culorii casetei de intrare de mai jos, prin schimbarea este valoarea:
Exemplu
<div ng-app="" ng-init="myCol='lightblue'">
<input
style="background-color:{{myCol}}" ng-model="myCol" value="{{myCol}}">
</div>
Încearcă - l singur » numere AngularJS
AngularJS numere sunt ca numere JavaScript:
Exemplu
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: {{ quantity * cost }}</p>
</div>
Încearcă - l singur » Acelasi exemplu folosind ng-bind :
Exemplu
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>
</div>
Încearcă - l singur » Utilizarea ng-init nu este foarte frecvente. Vei învăța o modalitate mai bună de a inițializa datele în capitolul despre controlere.
AngularJS Strings
AngularJS siruri de caractere sunt ca siruri de caractere JavaScript:
Exemplu
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is {{ firstName + " " + lastName }}</p>
</div>
Încearcă - l singur » Acelasi exemplu folosind ng-bind :
Exemplu
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>
Încearcă - l singur » Obiecte AngularJS
AngularJS obiecte sunt ca obiecte JavaScript:
Exemplu
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is {{ person.lastName }}</p>
</div>
Încearcă - l singur » Acelasi exemplu folosind ng-bind :
Exemplu
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is <span ng-bind="person.lastName"></span></p>
</div>
Încearcă - l singur » AngularJS Arrays
AngularJS matrice sunt ca matrice JavaScript:
Exemplu
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is {{ points[2] }}</p>
</div>
Încearcă - l singur » Acelasi exemplu folosind ng-bind :
Exemplu
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is <span ng-bind="points[2]"></span></p>
</div>
Încearcă - l singur » AngularJS Expresiile vs. JavaScript expresii
Ca și expresii JavaScript, expresii AngularJS pot conține valori literale, operatori, și variabile.
Spre deosebire de expresii JavaScript, expresii AngularJS pot fi scrise în interiorul HTML.
AngularJS expresii nu acceptă condiționale, buclele, și excepții, în timp ce expresii JavaScript fac.
AngularJS expresii suporta filtre, în timp ce expresii JavaScript nu.