从Angular Js中的内联Json数据填充表

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了从Angular Js中的内联Json数据填充表相关的知识，希望对你有一定的参考价值。

Populating Table from Inline Json Data in Angular js
  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>

以上是关于从Angular Js中的内联Json数据填充表的主要内容，如果未能解决你的问题，请参考以下文章

使用Angular.js中的cookie填充选择的相关下拉列表

Angular.js 内联编辑

如何在 `angular.json` 中配置内联样式和 html 模板？

如何使用 Angular 6 中的自定义指令来呈现动态生成的内联 SVG

将json数据推送到angular js中的现有数组

从 Angular 2+ 中的预定义数据填充 formControlName 复选框