Use angularjs to create a simple table _ AngularJS

AngularJS provides rich forms and verification. We can use ng-click to handle AngularJS click button events, and then use the $ dirty and $ invalid flag for verification. Use the novalidate form declaration to prohibit any browser-specific verification. Next, let's take a look at how to use angularjs to create a simple table to take over the first project in life. We need to use angularjs to create tables and implement various functions. Therefore, we have encountered various problems and unfamiliar knowledge points, we will record it here for you to learn and exchange, and the solution may not be complete or conform to the specifications. If you have a better way, please note that the table function is created a little bit, therefore, I will introduce it in several parts. New features will be updated from time to time if they are added.

First, tables are edited using BootStrap styles, mainly using angularjs. To facilitate jQuery, You need to introduce bootstrap, angularjs, and jq files during testing.

Body:

HTML section

Table Generation 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 header content, that is, the code in thead

1.1 ng-model is the full selection function of the check box. By binding data in this status, you can synchronize the data to all the checkboxes in the tbody (using ng-checked)

2. Use ng-repeat in the tbody to generate each piece of information cyclically, where:

2.1

It is a p that supports inputting multiple rows of content, which can quickly Replace the textarea tag. However, since ng-model does not support data binding of p, you need to use directive to customize the ngmodel function, I will talk about it later

2.3 use the select tag in ng-repeat to bind the data or bind ng-model to each option.

3. Finally, you only need to assign the data to $ scope. saveData to generate a table.

 
 
          
  
  
 
   
 
    
Select All
 
    
Serial number
 
    
Name
 
    
Date
 
    
Competition Team (red)
 
    
Competition Team (blue)
 
    
Score
 
    
Description
 
    
Gamer Support Team
 
   
 
   
 
    
First game
 
    
Second Game
 
    
Description
 
    
First game
 
    
Second Game
 
    
Description
 
   
 
  
  
  
  
   
  
    
 
    
{Tb. id }}
 
    
{Tb. zbname }}
 
    
{Tb. zbtime }}
 
    
{Tb. zbrul1 }}
 
    
{Tb. zbrul2 }}
 
    
 
    
{Tb. zbrul2 }}
 
    
{Tb. zbrul1 }}
 
    
  
    
{Tb. score }}
 
    
 
    
  {Tb. type }} Red Square support Support blue square Both parties are the same  
 
   
 
  
        
 
 

JS Section: The Code of all the script parts is written in angular. module ("myModule", []). controller ('myctrl ', function ($ scope) {written here }.

The Code is as follows:

$ Scope. isshow = true;
// Mimic the data obtained by the request
$ Scope. saveDate = [{id: 1, zbname: "Central Asian division competition", zbtime: "2015-12-03", zbrul1: "victory", zbrul2: "failure", por: "Enter the description", score: "2:1", type: "Red Square supported "},
{Id: 2, zbname: "Japan and South Korea division competition", zbtime: "2015-11-11", zbrul1: "victory", zbrul2: "victory", por: "enter instructions ", score: "2:1", type: "blue-party supported "},
{Id: 3, zbname: "European and American Division competition", zbtime: "2015-3-03", zbrul1: "failed", zbrul2: "victory", por: "enter instructions ", score: "2:1", type: "Both parties are the same "},
{Id: 4, zbname: "Middle East Division competition", zbtime: "2016-1-05", zbrul1: "victory", zbrul2: "failure", por: "Enter description ", score: "2:1", type: "blue-party supported "},
{Id: 5, zbname: "Beijing division competition", zbtime: "2014-12-23", zbrul1: "failed", zbrul2: "victory", por: "enter instructions ", score: "2:1", type: "Both parties are the same "},
{Id: 6, zbname: "South Korea division competition", zbtime: "2015-11-01", zbrul1: "failed", zbrul2: "victory", por: "enter instructions ", score: "2:1", type: "Both parties are the same "},
{Id: 7, zbname: "Japanese division competition", zbtime: "2011-1-23", zbrul1: "victory", zbrul2: "failure", por: "Enter description ", score: "2:1", type: "Red Square supported "},
{Id: 8, zbname: "Central Asian division competition", zbtime: "2013-12-15", zbrul1: "failed", zbrul2: "victory", por: "enter instructions ", score: "2:1", type: "blue-party supported "},
{Id: 9, zbname: "Central Asian division competition", zbtime: "2015-10-17", zbrul1: "failed", zbrul2: "victory", por: "enter instructions ", score: "2:1", type: "Red Square supported "},
{Id: 10, zbname: "Central Asian division competition", zbtime: "2015-11-21", zbrul1: "victory", zbrul2: "victory", por: "enter instructions ", score: "2:1", type: "blue-party supported "},
{Id: 11, zbname: "Central Asian division competition", zbtime: "2015-2-02", zbrul1: "failed", zbrul2: "failed", por: "Enter description ", score: "2:1", type: "Red Square supported "},
{Id: 12, zbname: "Central Asian division competition", zbtime: "2015-2-05", zbrul1: "victory", zbrul2: "failure", por: "Enter description ", score: "2:1", type: "Both parties are the same "}
]; // Var arr = []; // used to bind the data information generated in ngrepeat.