AngularJS Framework : Tables
bogotobogo.com site search:
ng-repeat & table
The ng-repeat directive is perfect for displaying tables:
<!DOCTYPE html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> </head> <body> <div ng-app="" ng-controller="planetController"> <table> <tr> <th>Planet</th> <th>Distance</th> </tr> <tr ng-repeat="x in names"> <td>{{ x.name}}</td> <td>{{ x.distance}}</td> </tr> </table> </div> <script> function planetController($scope, $http) { $http.get("http://www.bogotobogo.com/AngularJS/files/Tables/planet.json") .success(function(response) {$scope.names = response;}); } </script> </body> </html>
With planet.json:
[ {"name":"Neptune", "distance":30.087}, {"name":"Uranus", "distance":19.208}, {"name":"Saturn", "distance":9.523}, {"name":"Jupiter", "distance":5.203}, {"name":"Mars", "distance":1.524}, {"name":"Earth", "distance":1.0}, {"name":"Venus", "distance":0.723}, {"name":"Mercury", "distance":0.387} ]
table with css
<!DOCTYPE html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> <style> table, th , td { border: 1px solid grey; border-collapse: collapse; padding: 5px; } table tr:nth-child(odd) { background-color: #f5f5f5; } table tr:nth-child(even) { background-color: #ffffff; } </style> </head> <body> <div ng-app="" ng-controller="planetController"> <table> <tr> <th>Planet</th> <th>Distance</th> </tr> <tr ng-repeat="x in names"> <td>{{ x.name}}</td> <td>{{ x.distance}}</td> </tr> </table> </div> <script> function planetController($scope, $http) { $http.get("http://www.bogotobogo.com/AngularJS/files/Tables/planet.json") .success(function(response) {$scope.names = response;}); } </script> </body> </html>
With the same json file, planet.json:
[ {"name":"Neptune", "distance":30.087}, {"name":"Uranus", "distance":19.208}, {"name":"Saturn", "distance":9.523}, {"name":"Jupiter", "distance":5.203}, {"name":"Mars", "distance":1.524}, {"name":"Earth", "distance":1.0}, {"name":"Venus", "distance":0.723}, {"name":"Mercury", "distance":0.387} ]
AngularJS
Ph.D. / Golden Gate Ave, San Francisco / Seoul National Univ / Carnegie Mellon / UC Berkeley / DevOps / Deep Learning / Visualization