How to Use angularjs to create a complete table _ AngularJS

Source: Internet
Author: User
Tags square support
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
    Related Article

    Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.