使用angularjs创建简单表格

前端之家收集整理的这篇文章主要介绍了使用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中生成的各条数据信息

猜你在找的JavaScript相关文章