Εξpressions AngularJS

Το AngularJS χρησιμοποιείΕκφράσειςΔημιουργία δεσμού δεδομένων με το HTML.

Εξpressions AngularJS

Οι εκφράσεις του AngularJS μπορούν να γραφτούν μέσα σε διπλά παρεχτάσματα:{{ expression }}.

Οι εκφράσεις του AngularJS μπορούν επίσης να γραφτούν μέσα σε οδηγίες:ng-bind="expression".

Το AngularJS θα αναλύσει την έκφραση και θα επιστρέψει το αποτέλεσμα στην τοποθεσία γραφής της εκφράσης.

Εξpressions AngularJSμοιάζει πολύ με Εκφράσεις JavaScript：Μπορούν να περιέχουν litterals, οπέρadores και μεταβλητές.

Παράδειγμα {{ 5 + 5 }} ή {{ firstName + " " + lastName }}

παράδειγμα

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
  <p>Η πρώτη μου έκφραση: {{ 5 + 5 }}</p>
</div>
</body>
</html>

Δοκιμάστε το!

Αν αφαιρέσετε ng-app Οι οδηγίες, το HTML θα εμφανίσει την έκφραση όπως είναι χωρίς να την αναλύσει:

παράδειγμα

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div>
  <p>Η πρώτη μου έκφραση: {{ 5 + 5 }}</p>
</div>
</body>
</html>

Δοκιμάστε το!

Μπορείτε να γράψετε εκφράσεις σε οποιαδήποτε θέση σας αρέσει και το AngularJS θα απλοποιήσει την ανάλυση της εκφράσης και θα επιστρέψει το αποτέλεσμα.

παράδειγμα: Ας αλλάξει το AngularJS τη τιμή της CSS ιδιότητας.

Αλλάξτε τη τιμή του για να αλλάξετε το χρώμα του παρακάτω πεδίου εισαγωγής:

κυανή λευκή

παράδειγμα

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

Δοκιμάστε το!

Αριθμοί του AngularJS

Οι αριθμοί του AngularJS είναι όπως οι αριθμοί του JavaScript:

παράδειγμα

<div ng-app="" ng-init="quantity=1;cost=5">
<p>Το συνολικό ποσό (δολάρια): {{ quantity * cost }}</p>
</div>

Δοκιμάστε το!

χρήση ng-bind παράδειγμα:

παράδειγμα

<div ng-app="" ng-init="quantity=1;cost=5">
<p>Το συνολικό ποσό (δολάρια): <span ng-bind="quantity * cost"></span></p>
</div>

Δοκιμάστε το!

Η χρήση του ng-init δεν είναι συχνή. Θα μάθετε καλύτερες μεθόδους για την αρχικοποίηση δεδομένων στον κεφάλαιο για τους ελεγκτές.

Αλφαριθμητικές ακολουθίες του AngularJS

Οι αλφαριθμητικές ακολουθίες του AngularJS είναι όπως οι αλφαριθμητικές ακολουθίες του JavaScript:

παράδειγμα

<div ng-app="" ng-init="firstName='Bill';lastName='Gates'">
<p>Το όνομα είναι {{ firstName + " " + lastName }}</p>
</div>

Δοκιμάστε το!

παράδειγμα χρήσης του ng-bind:

παράδειγμα

<div ng-app="" ng-init="firstName='Bill';lastName='Gates'">
<p>Το όνομα είναι <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>

Δοκιμάστε το!

Αντικείμενα του AngularJS

Οι αντικείμενα του AngularJS είναι όπως τα αντικείμενα του JavaScript:

παράδειγμα

<div ng-app="" ng-init="person={firstName:'Bill',lastName:'Gates'}">
<p>Το όνομα είναι {{ person.lastName }}</p>
</div>

Δοκιμάστε το!

παράδειγμα χρήσης του ng-bind:

παράδειγμα

<div ng-app="" ng-init="person={firstName:'Bill',lastName:'Gates'}">
<p>Το όνομα είναι <span ng-bind="person.lastName"></span></p>
</div>

Δοκιμάστε το!

Ακολουθίες του AngularJS

Οι ακολουθίες του AngularJS είναι όπως οι ακολουθίες του JavaScript:

παράδειγμα

<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>Το τρίτο αποτέλεσμα είναι {{ points[2] }}</p>
</div>

Δοκιμάστε το!

παράδειγμα χρήσης του ng-bind:

παράδειγμα

<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>Το τρίτο αποτέλεσμα είναι <span ng-bind="points[2]"></span></p>
</div>

Δοκιμάστε το!

Οι εξpressions AngularJS και οι εξpressions JavaScript

Παρόμοια με τις εξpressions JavaScript, οι εξpressions AngularJS μπορούν να περιέχουν τιμές, οペρατόρες και μεταβλητές.

Διαφορετικά από τις εξpressions JavaScript, οι εξpressions AngularJS μπορούν να γράφονται μέσα στο HTML.

Οι εξpressions AngularJS δεν υποστηρίζουν προϋποθέσεις, γύρους και εξαιρέσεις, ενώ οι εξpressions JavaScript υποστηρίζουν.

Οι εξpressions AngularJS υποστηρίζουν φίλτρα, ενώ οι εξpressions JavaScript δεν υποστηρίζουν.

Μάθετε για το JavaScript στο Εκπαιδευτικό Υλικό μας για το JavaScript