初步接手人生的第一个项目，需要用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}} | |||||
JS部分：备注所有的script部分的代码都写在angular.module("myModule",[]).controller('myCtrl', function($scope) {写在这里}中
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有