How to Use angularjs to create a complete table _ AngularJS

This article will share with you the real case of creating a complete table using angularjs, and sharing the complete code with you based on the previous articles, if you have any need, you can refer to the following: I am also learning and writing, so the sorting is messy. The complete code of my example is released below to facilitate your communication and testing. If you have any questions, please comment.

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

Overall code preview:

HTML:

// You need to introduce the js and css files of BOOTStrap, angularjs, and jQuery. Welcome 
  
   
{KaohzbTitle }}
  
   
    
           Refresh           Save    
   
   
    
    
 
 
     
  
  
 
   
 
    
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  
 
   
 
  
    
 
 
   
  
   
 
 
    
  
  
Previous Page
    
  
  
  
   
 
   
 
    
  
  
Next Page
   
 
 
Current is the page, total page your current select operation value is: {typename }}
  
  

Js Code:

Script angular. module ("myModule", []). controller ('myctrl ', function ($ scope) {$ scope. kaohzbTitle = "assessment indicator maintenance"; $ scope. search = new Object (); $ scope. isdisabled = false; $ scope. isInfo = false; $ scope. saveDate = ""; // used to save the original data. // $ http. post request table data // The data obtained by imitating the request var datalist = [{id: 1, zbname: "Central Asian division competition", zbtime: "2015-12-03", zbrul1: "victory ", zbrul2: "failed", por: "Enter 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: "supported" },{ id: 3, zbname: "Europe and America Division competition", zbtime: "2015-3-03", zbrul1: "failed", zbrul2: "victory ", por: "Enter the description", score: "", type: "Both sides are the same" },{ id: 4, zbname: "Middle East Division competition", zbtime: "", zbrul1: "victory", zbrul2: "failure", por: "Please enter the description", score: "", type: "supported blue square "}, {id: 5, zbname: "Beijing division competition", zbtime: "2014-12-23", zbrul1: "failed", zbrul2: "victory", por: "enter instructions ", score: "2:1", type: "Both sides are the same" },{ id: 6, zbname: "South Korea division competition", zbtime: "2015-11-01", zbrul1: "failed ", zbrul2: "victory", por: "Enter description", score: "2:1", type: "Both sides are the same" },{ id: 7, zbname: "Japanese division competition", zbtime: "2011-1-23", zbrul1: "victory", zbrul2: "failure", por: "Enter description content", score: "2:1 ", type: "supported redsquare" },{ id: 8, zbname: "Central Asian division competition", zbtime: "2013-12-15", zbrul1: "failed", zbrul2: "victory ", por: "Enter description", score: "2:1", type: "supported" },{ id: 9, zbname: "Central Asian division competition", zbtime: "", zbrul1: "failed", zbrul2: "victory", por: "Enter description", score: "", 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: "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: "", zbrul1: "victory", zbrul2: "failure", por: "Enter description content", score ", type: "identical"}]; $ scope. fun = function () {var e = window. event | arguments [0]; var src = e. srcElement | e.tar get; if (src. nodeName = "TD") {var par = src. parentNode; var sd = par. getElementsByTagName ("td") [0]; if (sd. firstChild. checked = true) {sd. firstChild. checked = false;} else {$ ("tr td "). attr ("checked", false); sd. firstChild. checked = true ;}}$ scope. refresh = function () {// click the refresh button to display the table $ scope. saveDate = datalist; // console. log ("end with data"); $ scope. $ watch ("saveDate", function () {// 2016.1.20 listen to the list to generate data. When the list changes, execute refresh table_page (); $ scope. isshow = true ;}) ;}$ scope. save = function () {// page submit button console. log ("prepare to save"); console. log ($ scope. saveDate); // The data is automatically saved to the original data list as long as the data changes.} // The table paging function table_page () {var show_page = 5; // number of entries displayed per page var page_all = $ ("# page "). children (). size (); // total number of bars var current_page = 1; // current page // console. log (page_all); var page_num = Math. ceil (page_all/show_page); // total number of pages var current_num = 0; // used to generate the counter var li = ""; // while (page_num> current_num) {// cyclically generated tab element li + ='
'+ (Current_num + 1) +'
'; Current_num ++ ;}$ ("# page_num_all" ).html (li); // Add a page to the page $ (' # page tr').css ('display ', 'None'); // set to hide $ ('# page tr '). slice (0, show_page0000.css ('display', ''); // set the display $ (" # current_page ").html (" "+ current_page + ""); // display the current page $ ("# page_all" ).html ("" + page_num + ""); // display the total number of pages $ ("# previous "). click (function () {// Previous Page var new_page = parseInt ($ ("# current_page "). text ()-1; if (new_page> 0) {$ ("# current_page" ).html ("" + new_p Age + ""); tab_page (new_page) ;}}; $ ("# next "). click (function () {// next page var new_page = parseInt ($ ("# current_page "). text () + 1; // if (new_page <= page_num) of the current page) {// determine whether it is the last or first page $ ("# current_page" ).html ("" + new_page + ""); tab_page (new_page) ;}}); $ (". page_num "). click (function () {// page Jump var new_page = parseInt ($ (this ). text (); tab_page (new_page) ;}); function tab_page (index) {// switch the page var start = (index-1) * show_pa Ge; // page marker var end = start + show_page; // Number of interceptions ('invalid page'}.children().css ('display', 'None '). slice (start, end).css ('display', ''); current_page = index; $ (" # current_page "HTML .html (" "+ current_page + "");}}}). directive ('contenteditable', function () {// attributes of the custom ngModel can be used in other elements such as p. return {restrict: 'A', // use require as an attribute: '? Ngmodel', // function link: function (scope, element, attrs, ngModel) {if (! NgModel) {return;} // do nothing if no ng-model // Specify how UI shocould be updated ngModel. $ render = function () {element.html (ngModel. $ viewValue | '') ;}; // Listen for change events to enable binding element. on ('blur keyup change', function () {scope. $ apply (readViewText) ;}); // No need to initialize, AngularJS will initialize the text based on ng-model attribute // Write data to the model function readViewText () {var html = element.html (); // When we clear the content editable the browser leaves
Behind // If strip-br attribute is provided then we strip this out if (attrs. stripBr & html ='
') {Html = '';} ngModel. $ setViewValue (html) ;}};}) script