Create a simple table using angularjs_AngularJS-JS Tutorial-php.cn

Create a simple table using angularjs_AngularJS

WBOY

Release： 2016-05-16 15:18:56

Original

1342 people have browsed it

This is my first project in my life. I need to use angularjs to make tables and implement various functions. Therefore, I encountered various problems and knowledge points that I was not familiar with before. I will record them here for everyone to learn, communicate and solve. It may not be perfect or meet the specifications. If you have a better way, please point it out. Since the production of this table function is added little by little, I will also introduce it in several parts. If new functions are added in the future, I will also introduce it from time to time. Updated

First of all, the table is edited in BootStrap style, mainly using angularjs. For convenience, there is also a jQuery method. You need to introduce bootstrap, angularjs and jq files yourself during testing.

Text:

HTML part

Generating a table is relatively simple, mainly through angularjs data binding and ng-repeat to automatically generate each piece of information.

1. First you need to customize the content of the header, that is, the code in thead

　1.1 ng-model is the all-select function of the check box. By binding the data of this state, it can be synchronously assigned to all checkboxes in the tbody (using ng-checked)

2. Loop through ng-repeat in tbody to generate each piece of information, where:

　2.1

is a div that supports inputting multi-line content, and can quickly and easily replace the textarea tag. However, since ng-model does not support data binding of divs, you need to use directives to customize the ngmodel function, which will be discussed later

　2.3 Use the select tag in ng-repeat to bind data. You cannot bind ng-model to each option. This will be explained later

3. Finally, just assign the data to $scope.saveData to generate the table

<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>

Copy after login

JS part: Note that all script part codes are written in angular.module("myModule",[]).controller('myCtrl', function($scope) {written here} Medium

Copy code The code is as follows:

$scope.isshow=true;

// Imitate the data obtained from the request

$scope.saveDate=[{ id:1,zbname:"Central Asia Division Competition",zbtime:"2015-12-03",zbrul1:"Victory",zbrul2:"Failure",por:"Please enter the description" ,score:"2:1",type:"support red side"},

{ id:2,zbname:"Japan-Korea Division Competition",zbtime:"2015-11-11",zbrul1:"Victory",zbrul2:"Victory",por:"Please enter the description",score:"2: 1",type:"support blue side"},

{ id:3,zbname:"European and American competition",zbtime:"2015-3-03",zbrul1:"Failure",zbrul2:"Victory",por:"Please enter the description",score:"2:1 ",type:"Both sides are the same"},

{ id:4,zbname:"Middle East Division Competition",zbtime:"2016-1-05",zbrul1:"Victory",zbrul2:"Failure",por:"Please enter the description",score:"2:1 ",type:"Support blue side"},

{ id:5,zbname:"Beijing Division Competition",zbtime:"2014-12-23",zbrul1:"Failure",zbrul2:"Victory",por:"Please enter the description",score:"2:1 ",type:"Both sides are the same"},

{ id:6,zbname:"Korea Division Competition",zbtime:"2015-11-01",zbrul1:"Failure",zbrul2:"Victory",por:"Please enter the description",score:"2:1 ",type:"Both sides are the same"},

{ id:7,zbname:"Japan Division Competition",zbtime:"2011-1-23",zbrul1:"Victory",zbrul2:"Failure",por:"Please enter the description",score:"2:1 ",type:"Support red side"},

{ id:8,zbname:"Central Asia Division Competition",zbtime:"2013-12-15",zbrul1:"Failure",zbrul2:"Victory",por:"Please enter the description",score:"2: 1",type:"support blue side"},

{ id:9,zbname:"Central Asia Division Competition",zbtime:"2015-10-17",zbrul1:"Failure",zbrul2:"Victory",por:"Please enter the description",score:"2: 1",type:"Support red square"},

{ id:10,zbname:"Central Asia Division Competition",zbtime:"2015-11-21",zbrul1:"Victory",zbrul2:"Victory",por:"Please enter the description",score:"2: 1",type:"support blue side"},

{ id:11,zbname:"Central Asia Division Competition",zbtime:"2015-2-02",zbrul1:"Failure",zbrul2:"Failure",por:"Please enter the description",score:"2: 1",type:"Support red square"},

{ id:12,zbname:"Central Asia Division Competition",zbtime:"2015-2-05",zbrul1:"Victory",zbrul2:"Failure",por:"Please enter the description",score:"2: 1",type:"Both sides are the same"}

]; // var arr=[]; // Used to bind each piece of data information generated in ngrepeat respectively