Επιλογη σειρας σε πινακα με τα directives ng-click και ng-class του AngularJS.
Στους επομενους μηνες τα project ηλεκτρονικων δυστυχως δεν θα ειναι πολλα, οποτε τα περισσοτερα post θα αφορουν το wed development. Και επειδη οπως ειπα σε προηγουμενo post ασχολουμαι εντατικα με το AngularJs της google, σημερα θα περιγραψω εναν τροπο για την επιλογη(highlight) μιας σειρας σε ενα πινακα. Ξεκιναμε με τον controller μας οποιος περιεχει ενα μικρο directory με καποια object. Στην προκειμενη περιπτωση 3 αυτοκινητα. Εξομοιωση στην ουσια ενος request σε καποια βαση δεδομενων. Επισης υπαρχει μια απλη function που δεχεται τον αριθμο της σειρας και τον περναει σε ενα property του scope.
var myAppModule = angular.module('myApp', []);
myAppModule.controller('Controller', function($scope) {
$scope.directory = [{ model: "Bmw", color: "Blue", year: "2010" },
{ model: "Opel", color: "Black", year: "2008" },
{ model: "Audi", color: "White", year: "2013" }];
$scope.selectCar = function(row) {
$scope.selectedRow = row;
};
});
Επειτα προσθετουμε στο css αρχειο μας μια class η οποια απλα βαζει ενα χρωμα της αρεσκειας μας για background.
.selected {
background-color: lightskyblue;
}
Και τελος το index αρχειο μας στο οποιο με το ng-repeat διαβαζουμε ενα ενα τα δεδομενα του directory και δημιουργουμε για το καθε ενα μια νεα σειρα στον πινακα. Τωρα μεσω του ng-click καλουμε την function που δημιουργησαμε προηγουμενως στον controller μας και για αριθμο περναμε το $index. Ετσι οταν ο αριθμος index της σειρας που εχουμε κανει κλικ ειναι ιδιος με την τιμη που εχει το property selectedRow τοτε η css κλαση selected εχει την τιμη true οποτε ενεργοποιητε το background-color. Δειτε το κωδικα παρακατω:
<html ng-app="myApp">
<head>
<title>Angular Test</title>
</head>
<link href="css/bootstrap.css" rel="stylesheet" />
<body ng-controller='Controller'>
<table style="margin: 20px;">
<tr><th>Model</th><th>Color</th><th>Year</th></tr>
<tr ng-repeat="car in directory" ng-click="selectCar($index)" ng-class="{selected: $index==selectedRow}">
<td>{{car.model}}</td><td>{{car.color}}</td><td>{{car.year}}</td>
</tr>
</table>
<script src="js/angular.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/controller.js"></script>
</body>
</html>
Περισσοτερες πληροφοριες κλικ εδω: ng-repeat , ng-click , ng-class.