Use Angularjs to create a simple table _angularjs

The first project to take over the life, the need to use ANGULARJS to make tables and achieve a variety of functions, so encountered a variety of problems and unfamiliar knowledge points, in this record down for everyone to learn to communicate, the solution may not be perfect or conform to the norms, if we have a better way to welcome the point, As this form of functionality is added a little bit, so I am also divided into several sections to introduce, in the future, if added new features will be updated

First of all, the table is bootstrap style editing, the main use is ANGULARJS, in order to facilitate and have jquery method, in the test to introduce themselves Bootstrap,angularjs and JQ files.

Body:

HTML section

Generating tables is simpler, mainly by ANGULARJS data binding and ng-repeat from dynamic generation of each piece of information.

1. First you need to customize the contents of the header, that is, the code in the THEAD

1.1 Where Ng-model is the optional feature of the check box, you can synchronize it to all the checkboxes in Tbody (with ng-checked) by binding the state's data

2. In Tbody, loop through ng-repeat to generate each piece of information, where:

2.1<div class= "text" contenteditable= "true" ng-model= "Tb.por" ></div> is a div that supports multiple lines of content, and can be a convenient and quick alternative to textarea tags , but because Ng-model does not support div data binding, you need to use directive to customize the Ngmodel feature, which is later said

2.3 Data binding in Ng-repeat using the Select label, or Ng-model binding to each option, followed by a description

3. Finally, simply 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" > select all < br > < input type = "checkbox" ng model = "SelectAll" > < th >
< th style = "text align: Center; width: 50px; vertical align: middle" rowspan = "2" > Sn < / th >
< th style = "text align: Center; width: 150px; vertical align: middle" rowspan = "2" > name < / th >
< th style = "text align: Center; width: 150px; vertical align: middle" rowspan = "2" > date < / th >
< th style = "text align: Center; width: 150px;" colSpan = "3" > competition team (red) < th >
< th style = "text align: Center; width: 150px;" colSpan = "3" > competition team (blue) < th >
< th style = "text align: Center; width: 150px; vertical align: middle" rowspan = "2" > score < / th >
< th style = "text align: Center; width: 150px; vertical align: middle" rowspan = "2" > description < / th >
< th style = "text align: Center; width: 150px; vertical align: middle" rowspan = "2" > player support team < / th >
</tr>
<tr>
< th style = "text align: Center; width: 80px;" > Scene 1 < / th >
< th style = "text align: Center; width: 80px;" > Scene 2 < / th >
< th style = "text align: Center; width: 80px;" > description < / th >
< th style = "text align: Center; width: 80px;" > Scene 1 < / th >
< th style = "text align: Center; width: 80px;" > Scene 2 < / th >
< th style = "text align: Center; width: 80px;" > description < / th >
</tr>
</thead>
<tbody ng-click="fun()" id="page" ng-show="isshow">
<!--track by tb.id-->
< tr ng repeat = "TB in savedate" >
<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;" >
<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 = "support red party" > support red party < / option >
< option value = "support blue square" > support blue square < / option >
< option value = "both sides are the same" > both sides are the same < / option >
</select>
</td>
</tr>
</tbody>
</table> 

JS Section : Note All the script parts of the code are written in Angular.module ("MyModule", []). Controller (' Myctrl ', function ($scope) {written here}

Copy Code code as follows:

$scope. Isshow=true;
Imitate the requested data
$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 and Korea Division Competition", Zbtime: "2015-11-11", Zbrul1: "Victory", Zbrul2: "Victory", Por: "Please enter description", Score: "2:1", type: "Support Blue Side"},
{id:3,zbname: "Europe and the United States Division Competition", Zbtime: "2015-3-03", ZBRUL1: "Failure", Zbrul2: "Victory", Por: "Please enter the description", Score: "2:1", type: "Two identical"},
{id:4,zbname: "Middle East Division Competition", Zbtime: "2016-1-05", Zbrul1: "Victory", Zbrul2: "Failure", Por: "Please enter 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: "Two identical"},
{id:6,zbname: "Korea Division Competition", Zbtime: "2015-11-01", ZBRUL1: "Failure", Zbrul2: "Victory", Por: "Please enter the description", Score: "2:1", type: "Two identical"},
{id:7,zbname: "Japan Division Competition", Zbtime: "2011-1-23", Zbrul1: "Victory", Zbrul2: "Failure", Por: "Please enter 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 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 description", Score: "2:1", type: "Support Red Side"},
{id:10,zbname: "Central Asia Division Competition", Zbtime: "2015-11-21", Zbrul1: "Victory", Zbrul2: "Victory", Por: "Please enter 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 description", Score: "2:1", type: "Support Red Side"},
{id:12,zbname: "Central Asia Division Competition", Zbtime: "2015-2-05", Zbrul1: "Victory", Zbrul2: "Failure", Por: "Please enter description", Score: "2:1", type: "Both sides identical"}
]; var arr=[];//is used to bind each piece of data information generated in Ngrepeat separately