初步接手人生的第一个项目,需要用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 class="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即可生成表格

<table class="table table-striped table-bordered table-hover"
id="example" style="margin-top:10px;">
<thead>
<tr>
<th style="width: 20px;" rowspan="2">全选 <br><input type="checkbox" ng-model="selectAll"></th>
<th style="text-align: center; width: 50px;vertical-align: middle" rowspan="2">序号</th>
<th style="text-align: center; width: 150px;vertical-align: middle" rowspan="2">名称</th>
<th style="text-align: center; width: 150px;vertical-align: middle" rowspan="2">日期</th>
<th style="text-align: center; width: 150px;" colspan="3">比赛队伍(红)</th>
<th style="text-align: center; width: 150px;" colspan="3">比赛队伍(蓝)</th>
<th style="text-align: center; width: 150px;vertical-align: middle" rowspan="2">比分</th>
<th style="text-align: center; width: 150px;vertical-align: middle" rowspan="2">说明</th>
<th style="text-align: center; width: 150px;vertical-align: middle" rowspan="2">玩家支持队伍</th>
</tr>
<tr>
<th style="text-align: center; width: 80px;">第一场</th>
<th style="text-align: center; width: 80px;">第二场</th>
<th style="text-align: center; width: 80px;">说明</th>
<th style="text-align: center; width: 80px;">第一场</th>
<th style="text-align: center; width: 80px;">第二场</th>
<th style="text-align: center; width: 80px;">说明</th>
</tr>
</thead>
<tbody ng-click="fun()" id="page" ng-show="isshow">
<!--track by tb.id-->
<tr ng-repeat="tb in saveDate"><!-- 只用angularjs实现点击一行就选中全行暂时无法实现 -->
<td style="width: 20px;"><input type="checkbox" ng-checked="selectAll"></td>
<td style="text-align:center;">{{tb.id}}</td>
<td style="text-align:center;">{{tb.zbname}}</td>
<td style="text-align:center;">{{tb.zbtime}}</td>
<td style="text-align:center;">{{tb.zbrul1}}</td>
<td style="text-align:center;">{{tb.zbrul2}}</td>
<td style="text-align:center;"><div class="text" contenteditable="true" ng-model="tb.por"></div></td>
<td style="text-align:center;">{{tb.zbrul2}}</td>
<td style="text-align:center;">{{tb.zbrul1}}</td>
<td style="text-align:center;"><div class="text" contenteditable="true" ng-model="tb.por"></div></td><!-- 2016.1.19通过可编译的div来代替输入框 -->
<td style="text-align:center;">{{tb.score}}</td>
<td style="text-align:center;"><div class="text" contenteditable="true" ng-model="tb.por"></div></td>
<td>
<select name="" id="" ng-change="changetype(adds)" ng-model="adds" style="text-align:center;width:100%;min-width:80px;margin-bottom:0">
<option value="" ng-show="isShow">{{tb.type}}</option>
<option value="支持红方">支持红方</option>
<option value="支持蓝方">支持蓝方</option>
<option value="双方相同">双方相同</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:"双方相同"}
]; // var arr=[];//用于分别绑定ngrepeat中生成的各条数据信息

如何用angularjs制作一个完整的表格之一__创建简单表格的更多相关文章

  1. 如何用angularjs制作一个完整的表格之五__完整的案例

    由于本人也是边学边写,因此整理的比较乱,下面放出我例子的完整代码,方便大家交流测试,如有问题欢迎评论 首先,表格采用的是BootStrap样式编辑的,主要使用的是angularjs,为了方便也有jQu ...

  2. 如何用angularjs制作一个完整的表格之四__自定义ng-model标签的属性使其支持input之外的html元素

    有的时候我们需要为非input类型的元素添加ng-model来实现双向的数据绑定,从而减少冗余代码,那么可以尝试一下的方式 例如:我页面中使用了contenteditable这个属性来实现用户可直接编 ...

  3. 如何用angularjs制作一个完整的表格之三__在ng-repeat中使用ng-model

    在ng-repeat中使用ng-model时会有许多问,有的人碰到无法获取绑定的数据内容,有的人遇到改动绑定的数据内容时所有循环生成的内容一起改变.上面的问题我在开发时也遇到过,但是解决后我却怎么也还 ...

  4. 如何用angularjs制作一个完整的表格之二__表格分页功能

    接上一次,这次主要介绍表格分页功能,由于项目需要这个案例是关于前端分页的方式,现在很少会这么用了,但如有需要可以参考其中的思路 html: 1.通过UL来展示页标,其中每个页标的li是通过异步加载从获 ...

  5. php怎么做网站?如何用PHP开发一个完整的网站?

    1.PHPer应具备的知识 (1)PHP知识: 熟练掌握基础函数,PHP语句(条件.循环),数组(排序.读取),函数(内部 构造),运算(数学 逻辑),面向对象(继承 接口 封装 多态静态属性)等. ...

  6. 用JS制作一个信息管理平台完整版

      前  言 JRedu 在之前的文章中,介绍了如何用JS制作一个实用的信息管理平台. 但是那样的平台功能过于简陋了,我们今天来继续完善一下. 首先我们回顾一下之前的内容.   1.JSON的基础知识 ...

  7. 使用CocosSharp制作一个游戏 - CocosSharp中文教程

    注:本教程翻译自官方<Walkthrough - Building a game with CocosSharp>,官方教程有很多地方说的不够详细,或者代码不全,导致无法继续,本人在看了G ...

  8. 编写Java程序,使用菜单组件制作一个记事本编辑器

    返回本章节 返回作业目录 需求说明: 使用菜单组件制作一个记事本编辑器 实现思路: 创建记事本菜单工具栏JMenuBar. 创建多个菜单条JMenu. 创建多个菜单项JMenuItem. 将菜单添加至 ...

  9. 用Phaser来制作一个html5游戏——flappy bird (一)

    Phaser是一个简单易用且功能强大的html5游戏框架,利用它可以很轻松的开发出一个html5游戏.在这篇文章中我就教大家如何用Phaser来制作一个前段时间很火爆的游戏:Flappy Bird,希 ...

随机推荐

  1. POJ 3180 The Cow Prom(强联通)

    题目大意: 约翰的N(2≤N≤10000)只奶牛非常兴奋,因为这是舞会之夜!她们穿上礼服和新鞋子,别上鲜花,她们要表演圆舞.           只有奶牛才能表演这种圆舞.圆舞需要一些绳索和一个圆形的 ...

  2. Xcode7真机调试iOS应用程序

    金田 近日苹果发布的新的Xcode7带来了许多特性,比如:swift语言比以前运行更快.功能更强.代码具有更高的可读性.Xcode的测试功能可以帮助用户记录应用程序的行为等,还有我们今天要讲到的Xco ...

  3. PHP去除空白字符

    例子1: <?php $var = " This is a beautiful day!"; // 删除字符串中的所有空白字符(不包括全角空格) $var1 = preg_r ...

  4. DateDiff 函数,用生日获得年龄

    一:截图 二:代码 using System; using System.Collections.Generic; using System.ComponentModel; using System. ...

  5. sql server 删除索引的语句

    DROP INDEX index_name ON talbe_nameDROP INDEX IX_TBlueyBook_10 ON 表名

  6. 开源的asp.net工作流程引擎。 http://ccflow.org

    开源的asp.net工作流程引擎. http://ccflow.org

  7. MakePic.com 图片制造 打造个性签名 拒绝垃圾邮件 生成个性印章

    MakePic.com 图片制造 打造个性签名 拒绝垃圾邮件 生成个性印章 欢迎使用MakePic.com

  8. Python入门基础教程(儿童版) [分享一本入门级教程]

    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1. 推荐书名 No Starch--Python for ...

  9. [Javascrip] Logging Timing Data to the Console

    Learn to use console.time with console.timeEnd to get accurate timings of operations in javascript. ...

  10. mac缺少预编译.a问题

    在win7的svn提交了coco2d-x 3.0代码,在mac进行更新,用xcode打开工程,编译不成功,一看好多的.a文件全部都是红色的,无法找到文件,一开始不了解coco2d-x的prebuilt ...