<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link data-require="bootstrap-css@2.3.2" data-semver="2.3.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />
<script data-require="angular.js@1.2.5" data-semver="1.2.5" src="http://code.angularjs.org/1.2.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body class="container" ng-controller="MyController">
<div class="row">
<div class="offset2 span8">
<h1 class="well">Esempio di tabella riordinabile</h1>
<table class="table table-striped">
<thead>
<tr>
<th ng-repeat="(col,colname) in table.thead">
<a ng-click="reverse(col)">{{ colname | uppercase }}</a>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in table.tbody | orderBy:table.col:!table.ascending">
<td ng-repeat="val in row">
{{ val }}
</td>
</tr>
</tbody>
</table>
<a class="btn btn-inverse" ng-click="addData()">aggiungi gli altri</a>
</div>
</div>
</body>
</html>
angular.module('myApp', [])
.controller('MyController', function($scope) {
$scope.hello = "ciao mondo!";
$scope.table = {
thead: {
col1: "nome",
col2: "numero",
col3: "data"
},
tbody: [{
col1: 'Luigi',
col2: 10,
col3: '31-12-2013'
}, {
col1: 'Marco',
col2: 27,
col3: '01-11-2013'
}],
ascending: -1,
col: ''
};
$scope.reverse = function(col) {
$scope.table.ascending =
$scope.table.ascending < 0 ? 0 : -1;
$scope.table.col = col;
};
$scope.addData = function() {
$scope.table.tbody.push({
col1: 'Giovanna',
col2: 7,
col3: '07-09-2013'
});
$scope.table.tbody.push({
col1: 'Sandro',
col2: 732,
col3: '01-05-2013'
});
$scope.table.tbody.push({
col1: 'Luca',
col2: 67,
col3: '02-04-2013'
});
$scope.table.tbody.push({
col1: 'Filippo',
col2: 92,
col3: '18-09-2013'
});
$scope.table.tbody.push({
col1: 'Arianna',
col2: 118,
col3: '15-01-2013'
});
};
});
/* Styles go here */