Maison > Article > interface Web > Tableau AngularJS
1. Contexte du problème
Concevez une table, le style est déterminé par Bootstrap et les données sont déterminées par AngularJS
2. Code source d'implémentation
<!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 , obtenir des résultats
Ce qui précède est le contenu de la table AngularJS. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !