Use angularjs to create a simple table _ AngularJS

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

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.