Populate Table from Inline Json Data In Angular Js


/ Published in: JavaScript
Save to your folder(s)

Populating Table from Inline Json Data in Angular js


Copy this code and paste it in your HTML
  1. <!DOCTYPE html>
  2. <html ng-app="tableJson">
  3. <head >
  4. <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  5. <!--<script src="../angular.1.2.14.min.js"></script>-->
  6. <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
  7. <title>Angular Framework</title>
  8.  
  9. </head>
  10. <body>
  11. <div ng-controller="tableJsonCtrl">
  12. <table border="1" cellpadding="10">
  13. <tr ng-repeat="items in phones">
  14. <td>{{items.name}}</td>
  15. <td>{{items.snippet}}</td>
  16. <td>{{items.age}}</td>
  17. </tr>
  18. </table>
  19. </div>
  20. <script>
  21. var tableJson = angular.module('tableJson', []);
  22. tableJson.controller('tableJsonCtrl', function($scope){
  23. $scope.phones = [
  24. { "name": "Nexus S",
  25. "snippet": "Fast just got faster with Nexus S.",
  26. "age": 0
  27. },
  28. { "name": "Apple iPhone 4S (White) (8 GB)",
  29. "snippet": "3.5 Inch Widescreen Diagonal",
  30. "age": 1
  31. },
  32. { "name": "Samsung Galaxy Core 2 (White)",
  33. "snippet": "powerful 1.2 GHz Quad Core processor and Android 4.4 Kitkat Operating System",
  34. "age": 2
  35. },
  36. {
  37. "name": "Micromax Canvas HD Plus A190, white gold",
  38. "snippet": "4.76 GB for mass storage",
  39. "age": 2
  40. }
  41. ];
  42.  
  43. })
  44. </script>
  45. <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  46. </body>
  47.  
  48. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.