Advanced Search

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

Expand | Embed | Plain Text

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.