1. Problem background
Design a table, the style is determined by Bootstrap, and the data is determined by AngularJS
2. Implementation source code
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>AngularJS之表格</title> <link rel="stylesheet" href="../css/bootstrap.css" /> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> <script> var app = angular.module("tableApp",[]); app.controller("tableCon",function($scope){ $scope.datas = [ {name:"张三",age:"23"}, {name:"李斯",age:"22"}, {name:"王五",age:"21"}, {name:"赵倩",age:"24"}, {name:"五月",age:"25"} ] }); </script> </head> <body> <p ng-app="tableApp" ng-controller="tableCon"> <table class="table table-bordereds" style="text-align: center;"> <thead> <tr> <th style="text-align: center;">姓名</th> <th style="text-align: center;">年龄</th> </tr> </thead> <tr ng-repeat="data in datas"> <td>{{data.name}}</td> <td>{{data.age}}</td> </tr> </table> </p> </body> </html>
3. Implementation Result
## above This is the content of the AngularJS table. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!