1、问题背景
设计一个表格,样式由Bootstrap决定的,数据由AngularJS来决定的
2、实现源码
<!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、实现结果
以上就是AngularJS之表格的内容,更多相关内容请关注PHP中文网(www.php.cn)!