使用angularjs创建简单表格

 更新时间:2016年01月21日 10:11:58   投稿:hebedich  
AngularJS提供丰富填写表单和验证。我们可以用ng-click来处理AngularJS点击按钮事件,然后使用 $dirty 和 $invalid标志做验证的方式。使用novalidate表单声明禁止任何浏览器特定的验证。下面我们来看看如何使用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 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中生成的各条数据信息

相关文章

  • 详解Angular组件之中间人模式

    详解Angular组件之中间人模式

    设计一个组件时,组件应该是内聚的,应该不依赖外部已经存在的组件,要实现这种松耦合的组件要使用中间人模式。
    2021-05-05
  • 关于使用axios的一些心得技巧分享

    关于使用axios的一些心得技巧分享

    vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios,所以下面这篇文章主要给大家分享了关于使用axios的一些心得技巧,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-07-07
  • 浅谈angularJS2中的界面跳转方法

    浅谈angularJS2中的界面跳转方法

    今天小编就为大家分享一篇浅谈angularJS2中的界面跳转方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • 详谈Angular路由与Nodejs路由的区别

    详谈Angular路由与Nodejs路由的区别

    下面小编就为大家带来一篇详谈Angular路由与Nodejs路由的区别。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • 详解AngularJs路由之Ui-router-resolve(预加载)

    详解AngularJs路由之Ui-router-resolve(预加载)

    本篇文章主要介绍了详解AngularJs路由之Ui-router-resolve(预加载),具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • Angular.js中用ng-repeat-start实现自定义显示

    Angular.js中用ng-repeat-start实现自定义显示

    大家都知道Angular.js可以用ng-repeat来显示列表数据,可是如果想要自定义显示数据列表的话ng-repeat就实现不了了,这个时候可以利用ng-repeat-start 和 ng-repeat-end来实现,下面通过本文来详细看看实现的方法吧。
    2016-10-10
  • Angularjs中三种数据的绑定策略(“@”,“=”,“&”)

    Angularjs中三种数据的绑定策略(“@”,“=”,“&”)

    在AngularJS的指令中存在着三种绑定策略,他们分别是’=’,’@’,’&’。下面这篇文章主要介绍了Angularjs中这三种数据的绑定策略,有需要的朋友们可以参考借鉴,下面来一起看看吧。
    2016-12-12
  • Angular 2父子组件数据传递之@Input和@Output详解 (上)

    Angular 2父子组件数据传递之@Input和@Output详解 (上)

    这篇文章主要给大家介绍了关于Angular 2父子组件数据传递之@Input和@Output的相关资料,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面跟着小编一起来看看吧。
    2017-07-07
  • angularjs 源码解析之scope

    angularjs 源码解析之scope

    $scope 的使用贯穿整个 Angular App 应用,它与数据模型相关联,同时也是表达式执行的上下文.有了 $scope 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更新 $scope,同样的 $scope 发生改变时也会立刻重新渲染视图.
    2016-08-08
  • AngularJS通过ng-Img-Crop实现头像截取的示例

    AngularJS通过ng-Img-Crop实现头像截取的示例

    本篇文章主要介绍了AngularJS通过ng-Img-Crop实现头像截取的示例,具有一定的参考价值,有兴趣的可以了解一下
    2017-08-08

最新评论