AngularJS之表格

来源：互联网发布：网点纸淘宝编辑：程序博客网时间：2024/06/05 17:18

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、实现结果

0 0