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> <div 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> </div> </body> </html>
3、实现结果