使用angularjs创建简单表格_AngularJS

首先，表格采用的是BootStrap样式编辑的，主要使用的是angularjs，为了方便也有jQuery的方法，在测试时需自行引入bootstrap，angularjs和jq的文件。

正文：

HTML部分

生成表格比较简单，主要是通过angularjs的数据绑定和ng-repeat来自动生成每一条信息。

1.首先需要自定义表头的内容，即thead中的代码

　　1.1其中ng-model是复选框的全选功能，通过绑定该状态的数据，可以将其同步赋予tbody中的所有checkbox（用ng-checked）

2.在tbody中通过ng-repeat来循环生成其中的每一条信息，其中：

　　2.1是支持输入多行内容的div，可以方便快捷的替代textarea标签，但是由于ng-model不支持div的数据绑定，因此需要使用directive 来自定义ngmodel功能，后面会说

　　2.3 在ng-repeat中使用select标签对其中进行数据绑定，也不能将ng-model绑定到每个option中，后面会有说明

3.最后只要将数据赋给$scope.saveData即可生成表格

 

 

 
全选 

 
序号
 
名称
 
日期
 
比赛队伍（红）
 
比赛队伍（蓝）
 
比分
 
说明
 
玩家支持队伍
 
 

 
第一场
 
第二场
 
说明
 
第一场
 
第二场
 
说明
 
 

 
 

 

 
{{tb.id}}
 
{{tb.zbname}}
 
{{tb.zbtime}}
 
{{tb.zbrul1}}
 
{{tb.zbrul2}}
 

 
{{tb.zbrul2}}
 
{{tb.zbrul1}}
 

 
{{tb.score}}
 

 

 
 {{tb.type}}
 支持红方
 支持蓝方
 双方相同
 
 
 
 
 

JS部分：备注所有的script部分的代码都写在angular.module("myModule",[]).controller('myCtrl', function($scope) {写在这里}中

代码如下:
$scope.isshow=true；
// 模仿请求得到的数据
$scope.saveDate=[{ id:1,zbname:"中亚赛区比赛",zbtime:"2015-12-03",zbrul1:"胜利",zbrul2:"失败",por:"请输入说明内容",score:"2:1",type:"支持红方"},
{ id:2,zbname:"日韩赛区比赛",zbtime:"2015-11-11",zbrul1:"胜利",zbrul2:"胜利",por:"请输入说明内容",score:"2:1",type:"支持蓝方"},
{ id:3,zbname:"欧美赛区比赛",zbtime:"2015-3-03",zbrul1:"失败",zbrul2:"胜利",por:"请输入说明内容",score:"2:1",type:"双方相同"},
{ id:4,zbname:"中东赛区比赛",zbtime:"2016-1-05",zbrul1:"胜利",zbrul2:"失败",por:"请输入说明内容",score:"2:1",type:"支持蓝方"},
{ id:5,zbname:"北京赛区比赛",zbtime:"2014-12-23",zbrul1:"失败",zbrul2:"胜利",por:"请输入说明内容",score:"2:1",type:"双方相同"},
{ id:6,zbname:"韩国赛区比赛",zbtime:"2015-11-01",zbrul1:"失败",zbrul2:"胜利",por:"请输入说明内容",score:"2:1",type:"双方相同"},
{ id:7,zbname:"日本赛区比赛",zbtime:"2011-1-23",zbrul1:"胜利",zbrul2:"失败",por:"请输入说明内容",score:"2:1",type:"支持红方"},
{ id:8,zbname:"中亚赛区比赛",zbtime:"2013-12-15",zbrul1:"失败",zbrul2:"胜利",por:"请输入说明内容",score:"2:1",type:"支持蓝方"},
{ id:9,zbname:"中亚赛区比赛",zbtime:"2015-10-17",zbrul1:"失败",zbrul2:"胜利",por:"请输入说明内容",score:"2:1",type:"支持红方"},
{ id:10,zbname:"中亚赛区比赛",zbtime:"2015-11-21",zbrul1:"胜利",zbrul2:"胜利",por:"请输入说明内容",score:"2:1",type:"支持蓝方"},
{ id:11,zbname:"中亚赛区比赛",zbtime:"2015-2-02",zbrul1:"失败",zbrul2:"失败",por:"请输入说明内容",score:"2:1",type:"支持红方"},
{ id:12,zbname:"中亚赛区比赛",zbtime:"2015-2-05",zbrul1:"胜利",zbrul2:"失败",por:"请输入说明内容",score:"2:1",type:"双方相同"}
]; // var arr=[];//用于分别绑定ngrepeat中生成的各条数据信息