angular中渲染二維物件陣列
阿新 • • 發佈：2020-08-12
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>