使用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即可生成表格

Box" ng-model="selectAll"> 名称支持队伍 Box" ng-checked="selectAll"> score}}

JS部分

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

代码如下:

内容",score:"2:1",type:"支持红方"}, { id:2,zbname:"日韩赛区比赛",zbtime:"2015-11-11",zbrul2:"胜利",type:"支持蓝方"}, { id:3,zbname:"欧美赛区比赛",zbtime:"2015-3-03",zbrul1:"失败",type:"双方相同"}, { id:4,zbname:"中东赛区比赛",zbtime:"2016-1-05", { id:5,zbname:"北京赛区比赛",zbtime:"2014-12-23", { id:6,zbname:"韩国赛区比赛",zbtime:"2015-11-01", { id:7,zbname:"日本赛区比赛",zbtime:"2011-1-23", { id:8,zbtime:"2013-12-15", { id:9,zbtime:"2015-10-17", { id:10,zbtime:"2015-11-21", { id:11,zbtime:"2015-2-02", { id:12,zbtime:"2015-2-05",type:"双方相同"} ]; // var arr=[];//用于分别绑定ngrepeat中生成的各条数据信息

原文链接：https://www.f2er.com/js/50475.html

angularjs 创建表格

上一篇：Javascript中神奇的this 下一篇：angularjs表格分页功能详解

使用angularjs创建简单表格

HTML部分

JS部分

猜你在找的JavaScript相关文章