angular中渲染二维对象数组 

 1 <!DOCTYPE html>
 2 <html lang="en" ng-app="app">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <link rel="stylesheet" href="../lib/bootstrap-3.3.7/css/bootstrap.min.css">
 7     <script src="../lib/jquery/jquery.min.js"></script>
 8     <script src="../lib/bootstrap-3.3.7/js/bootstrap.min.js"></script>
 9     <script src="../lib/angular/angular.js"></script>
10     <script>
11         var app = angular.module('app', []);
12         app.controller('myCtrl', function ($scope) {
13             $scope.header=['姓名','年龄','身高','性别'];
14             $scope.data=[
15                 {
16                     name:'张三',
17                     age:21,
18                     height:168,
19                     sex:'男'
20                 },
21                 {
22                     name:'李四',
23                     age:20,
24                     height:158,
25                     sex:'男'
26                 },
27                 {
28                     name:'王五',
29                     age:28,
30                     height:155,
31                     sex:'女'
32                 },
33                 {
34                     name:'赵六',
35                     age:21,
36                     height:168,
37                     sex:'男'
38                 },
39                 {
40                     name:'钱七',
41                     age:26,
42                     height:168,
43                     sex:'男'
44                 },
45             ];
46         });
47     </script>
48 </head>
49 <body ng-controller="myCtrl">
50 <div class="container">
51     <table class="table table-bordered">
52         <thead>
53         <tr>
54             <th ng-repeat="item in header">{{item}}</th>
55         </tr>
56         </thead>
57         <tbody>
58         <tr ng-repeat="item in data">
59             <td ng-repeat="value in item track by $index">{{value}}</td>
60         </tr>
61         </tbody>
62     </table>
63 </div>
64 </body>
65 </html>

 

posted @ 2020-08-12 16:04  sct春天  阅读(282)  评论(0)    收藏  举报