Web Analytics Made Easy -
StatCounter
Επιλογη σειρας σε πινακα με τα directives ng-click και ng-class του AngularJS. – Devacron.com

Επιλογη σειρας σε πινακα με τα directives ng-click και ng-class του AngularJS.

Στους επομενους μηνες τα project ηλεκτρονικων δυστυχως δεν θα ειναι πολλα, οποτε τα περισσοτερα post θα αφορουν το wed development. Και επειδη οπως ειπα σε προηγουμενo post ασχολουμαι εντατικα με το AngularJs της google, σημερα θα περιγραψω εναν τροπο για την επιλογη(highlight) μιας σειρας σε ενα πινακα. Ξεκιναμε με τον controller μας οποιος περιεχει ενα μικρο directory με καποια object. Στην προκειμενη περιπτωση 3 αυτοκινητα. Εξομοιωση στην ουσια ενος request σε καποια βαση δεδομενων. Επισης υπαρχει μια απλη function που δεχεται τον αριθμο της σειρας και τον περναει σε ενα property του scope.

Επειτα προσθετουμε στο css αρχειο μας μια class η οποια απλα βαζει ενα χρωμα της αρεσκειας μας για background.

Και τελος το index αρχειο μας στο οποιο με το ng-repeat διαβαζουμε ενα ενα τα δεδομενα του directory και δημιουργουμε για το καθε ενα μια νεα σειρα στον πινακα. Τωρα μεσω του ng-click καλουμε την function που δημιουργησαμε προηγουμενως στον controller μας και για αριθμο περναμε το $index. Ετσι οταν ο αριθμος index της σειρας που εχουμε κανει κλικ ειναι ιδιος με την τιμη που εχει το property selectedRow τοτε η css κλαση selected εχει την τιμη true οποτε ενεργοποιητε το background-color. Δειτε το κωδικα παρακατω:

Περισσοτερες πληροφοριες κλικ εδω: ng-repeat , ng-click , ng-class.

AngularHighlight

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.