HTML DOM του AngularJS

Το AngularJS παρέχει οδηγίες που συνδέουν δεδομένα της εφαρμογής σε ιδιότητες στοιχείων του HTML DOM.

Οδηγία ng-disabled

ng-disabled Η οδηγία συνδέει τα δεδομένα της εφαρμογής του AngularJS στην ιδιότητα disabled του στοιχείου HTML.

Παράδειγμα AngularJS

<div ng-app="" ng-init="mySwitch=true">
<p>
<button ng-disabled="mySwitch">Κάνε κλικ εδώ!</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch">Κουμπί
</p>
<p>
{{ mySwitch }}
</p>
</div>

Δοκιμάστε το Προσωπικά

Περιγραφή εφαρμογής:

ng-disabled η οδηγία mySwitch Η οδηγία συνδέει τα δεδομένα της εφαρμογής στο HTML κουμπί Σύνδεση στην ιδιότητα η ιδιότητα.

ng-model Η οδηγία συνδέει τη τιμή του HTML πλαίσιου ελέγχου με την ιδιότητα mySwitch στο στοιχείο τιμής.

Αν mySwitch το πέμπτο στοιχείο είναι trueτο στοιχείο θα είναι απενεργοποιημένο:

<p>
<button disabled>Κάνε κλικ εδώ!</button>
</p>

Αν mySwitch το πέμπτο στοιχείο είναι falseΕάν το στοιχείο είναι κρυμμένο:

<p>
<button>Κάνε κλικ εδώ!</button>
</p>

Οδηγία ng-show

ng-show Οδηγίες εμφάνισης ή κρυψής HTML στοιχείων.

Παράδειγμα AngularJS

<div ng-app="">  
<p ng-show="true">Ἀντικείμενο.</p>  
<p ng-show="false">Είμαι αόρατος.</p>  
</div>

Δοκιμάστε το Προσωπικά

ng-show Η οδηγία βασίζεται στον ng-showΤιμήΕμφάνιση (ή απόκρυψη) στοιχείων HTML.

Μπορείτε να χρησιμοποιήσετε οποιαδήποτε έκφραση που αξιολογείται ως αληθής ή ψευδής:

Παράδειγμα AngularJS

<div ng-app="" ng-init="hour=13">
<p ng-show="hour > 12">Είμαι ορατός.</p>
</div>

Δοκιμάστε το Προσωπικά

Στο επόμενο κεφάλαιο θα παρέχονται περισσότερα παραδείγματα για την εξήγηση του τρόπου χρήσης του κλικ στο κουμπί για την αποκάλυψη ή την απόκρυψη στοιχείων HTML.

Οδηγίες ng-hide

ng-hide Οδηγίες για την αποκάλυψη ή την απόκρυψη στοιχείων HTML.

Παράδειγμα AngularJS

<div ng-app="">  
<p ng-hide="true">Είμαι αόρατος.</p>  
<p ng-hide="false">Είμαι ορατός.</p>  
</div>

Δοκιμάστε το Προσωπικά