使用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<divclass="text"contenteditable="true"ng-model="tb.por"></div>是支持输入多行内容的div，可以方便快捷的替代textarea标签，但是由于ng-model不支持div的数据绑定，因此需要使用directive来自定义ngmodel功能，后面会说
2.3在ng-repeat中使用select标签对其中进行数据绑定，也不能将ng-model绑定到每个option中，后面会有说明
3.最后只要将数据赋给$scope.saveData即可生成表格
<tableclass="tabletable-stripedtable-borderedtable-hover"
id="example"style="margin-top:10px;">
<thead>
<tr>
<thstyle="width:20px;"rowspan="2">全选<br><inputtype="checkbox"ng-model="selectAll"></th>
<thstyle="text-align:center;width:50px;vertical-align:middle"rowspan="2">序号</th>
<thstyle="text-align:center;width:150px;vertical-align:middle"rowspan="2">名称</th>
<thstyle="text-align:center;width:150px;vertical-align:middle"rowspan="2">日期</th>
<thstyle="text-align:center;width:150px;"colspan="3">比赛队伍（红）</th>
<thstyle="text-align:center;width:150px;"colspan="3">比赛队伍（蓝）</th>
<thstyle="text-align:center;width:150px;vertical-align:middle"rowspan="2">比分</th>
<thstyle="text-align:center;width:150px;vertical-align:middle"rowspan="2">说明</th>
<thstyle="text-align:center;width:150px;vertical-align:middle"rowspan="2">玩家支持队伍</th>
</tr>
<tr>
<thstyle="text-align:center;width:80px;">第一场</th>
<thstyle="text-align:center;width:80px;">第二场</th>
<thstyle="text-align:center;width:80px;">说明</th>
<thstyle="text-align:center;width:80px;">第一场</th>
<thstyle="text-align:center;width:80px;">第二场</th>
<thstyle="text-align:center;width:80px;">说明</th>
</tr>
</thead>
<tbodyng-click="fun()"id="page"ng-show="isshow">
<!--trackbytb.id-->
<trng-repeat="tbinsaveDate"><!--只用angularjs实现点击一行就选中全行暂时无法实现-->
<tdstyle="width:20px;"><inputtype="checkbox"ng-checked="selectAll"></td>
<tdstyle="text-align:center;">{{tb.id}}</td>
<tdstyle="text-align:center;">{{tb.zbname}}</td>
<tdstyle="text-align:center;">{{tb.zbtime}}</td>
<tdstyle="text-align:center;">{{tb.zbrul1}}</td>
<tdstyle="text-align:center;">{{tb.zbrul2}}</td>
<tdstyle="text-align:center;"><divclass="text"contenteditable="true"ng-model="tb.por"></div></td>
<tdstyle="text-align:center;">{{tb.zbrul2}}</td>
<tdstyle="text-align:center;">{{tb.zbrul1}}</td>
<tdstyle="text-align:center;"><divclass="text"contenteditable="true"ng-model="tb.por"></div></td><!--2016.1.19通过可编译的div来代替输入框-->
<tdstyle="text-align:center;">{{tb.score}}</td>
<tdstyle="text-align:center;"><divclass="text"contenteditable="true"ng-model="tb.por"></div></td>
<td>
<selectname=""id=""ng-change="changetype(adds)"ng-model="adds"style="text-align:center;width:100%;min-width:80px;margin-bottom:0">
<optionvalue=""ng-show="isShow">{{tb.type}}</option>
<optionvalue="支持红方">支持红方</option>
<optionvalue="支持蓝方">支持蓝方</option>
<optionvalue="双方相同">双方相同</option>
</select>
</td>
</tr>
</tbody>
</table>
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:"双方相同"}
];//vararr=[];//用于分别绑定ngrepeat中生成的各条数据信息