建一个大型网站多少钱,做推广的网站名称,wordpress 手机页面停,创业项目排行榜前十名初步接手人生的第一个项目#xff0c;需要用angularjs制作表格和实现各种功能#xff0c;因此遇到了各种问题和以前不熟悉的知识点#xff0c;在此记录下来#xff0c;以供大家学习交流#xff0c;解决方式可能并不完善或符合规范#xff0c;如果大家有更好的方式欢迎指出…初步接手人生的第一个项目需要用angularjs制作表格和实现各种功能因此遇到了各种问题和以前不熟悉的知识点在此记录下来以供大家学习交流解决方式可能并不完善或符合规范如果大家有更好的方式欢迎指出由于这个表格功能的制作是一点点添加上去的因此我也分成几个部分介绍日后如增加了新的功能也会不时更新的 首先表格采用的是BootStrap样式编辑的主要使用的是angularjs为了方便也有jQuery的方法在测试时需自行引入bootstrapangularjs和jq的文件。 正文 HTML部分 生成表格比较简单主要是通过angularjs的数据绑定和ng-repeat来自动生成每一条信息。 1.首先需要自定义表头的内容即thead中的代码 1.1其中ng-model是复选框的全选功能通过绑定该状态的数据可以将其同步赋予tbody中的所有checkbox用ng-checked 2.在tbody中通过ng-repeat来循环生成其中的每一条信息其中 2.1div classtext contenteditabletrue ng-modeltb.por/div是支持输入多行内容的div可以方便快捷的替代textarea标签但是由于ng-model不支持div的数据绑定因此需要使用directive 来自定义ngmodel功能后面会说 2.3 在ng-repeat中使用select标签对其中进行数据绑定也不能将ng-model绑定到每个option中后面会有说明 3.最后只要将数据赋给$scope.saveData即可生成表格 table classtable table-striped table-bordered table-hoveridexample stylemargin-top:10px;theadtrth stylewidth: 20px; rowspan2全选 brinput typecheckbox ng-modelselectAll/thth styletext-align: center; width: 50px;vertical-align: middle rowspan2序号/thth styletext-align: center; width: 150px;vertical-align: middle rowspan2名称/thth styletext-align: center; width: 150px;vertical-align: middle rowspan2日期/thth styletext-align: center; width: 150px; colspan3比赛队伍红/thth styletext-align: center; width: 150px; colspan3比赛队伍蓝/thth styletext-align: center; width: 150px;vertical-align: middle rowspan2比分/thth styletext-align: center; width: 150px;vertical-align: middle rowspan2说明/thth styletext-align: center; width: 150px;vertical-align: middle rowspan2玩家支持队伍/th/trtrth styletext-align: center; width: 80px;第一场/thth styletext-align: center; width: 80px;第二场/thth styletext-align: center; width: 80px;说明/thth styletext-align: center; width: 80px;第一场/thth styletext-align: center; width: 80px;第二场/thth styletext-align: center; width: 80px;说明/th/tr/thead
tbody ng-clickfun() idpage ng-showisshow!--track by tb.id--tr ng-repeattb in saveDate!-- 只用angularjs实现点击一行就选中全行暂时无法实现 --td stylewidth: 20px;input typecheckbox ng-checkedselectAll/tdtd styletext-align:center;{{tb.id}}/tdtd styletext-align:center;{{tb.zbname}}/tdtd styletext-align:center;{{tb.zbtime}}/tdtd styletext-align:center;{{tb.zbrul1}}/tdtd styletext-align:center;{{tb.zbrul2}}/tdtd styletext-align:center;div classtext contenteditabletrue ng-modeltb.por/div/tdtd styletext-align:center;{{tb.zbrul2}}/tdtd styletext-align:center;{{tb.zbrul1}}/tdtd styletext-align:center;div classtext contenteditabletrue ng-modeltb.por/div/td!-- 2016.1.19通过可编译的div来代替输入框 --td styletext-align:center;{{tb.score}}/tdtd styletext-align:center;div classtext contenteditabletrue ng-modeltb.por/div/tdtdselect name id ng-changechangetype(adds) ng-modeladds styletext-align:center;width:100%;min-width:80px;margin-bottom:0option value ng-showisShow{{tb.type}}/optionoption value支持红方支持红方/optionoption value支持蓝方支持蓝方/optionoption value双方相同双方相同/option/select/td/tr/tbody/table JS部分备注所有的script部分的代码都写在angular.module(myModule,[]).controller(myCtrl, function($scope) {写在这里}中 $scope.isshowtrue// 模仿请求得到的数据 $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中生成的各条数据信息 转载于:https://www.cnblogs.com/weblv/p/5146835.html
