Angular. js and Bootstrap are combined to implement table paging code _ AngularJS

I have been learning about angularjs recently. I wrote a small demo during the learning process. I will share my code ideas with you. I will give you a brief introduction to angular if you are interested. basic concepts of js and bootstrap.

AngularJS is a JavaScript framework. It can be added to the HTML page through the script tag.

AngularJS extends HTML through commands and binds data to HTML through expressions.

Bootstrap, from Twitter, is currently the most popular front-end framework. Bootstrap is based on HTML, CSS, and JAVASCRIPT. It is concise and flexible, making Web development faster.

I have been learning Angular. js recently and have also practiced many demos during the learning process. Here I will first paste a table + Page.

First, let's look at the final result:

I have to say that Angular. js Code style is very popular, and dozens of lines of code are clear and concise to implement the above functions.

First, the data source of the table comes from Server. js. Click to download it. After obtaining the number through get, the page is displayed.

1. The table is displayed through ng-repeat. The Code is as follows:

 
 

  
  
 
   
 
    
index
 
    
{{ x }}
 
   
 
   
 
    
{{ $index + 1 }}
 
    
 
    
 
    
 
   
 
  
 
 
 

$ Index is the default repeat parameter. The column header of the table is the key value cyclically obtained through the first row of the data source (json. Of course, if Bootstrap wants to specify that the Class of the table is table-bordered.

2. ng-repeat is also used for paging, and ng-repeat is a common instruction.

The paging code is as follows:

 
  
 

   
  
Previous Page
   
  
{Page }}
   
  
Next Page
  
 
  

Here the ng-click Event command is used. The ng-class command is also used.

ng-class="{active: isActivePage(page)}" 

The above code is used to select the style by page.

This table is paginated, and data is retrieved from the backend. json data is filtered by different pages.

Code + notes:

 Table 
 
 

 
 

  
  
 
   
 
    
Index
 
    
{X }}
 
   
 
   
 
    
{$ Index + 1 }}
 
    
 
    
 
    
 
   
 
  
 
 
 
  
 

   
  
Previous Page
   
  
{Page }}
   
  
Next Page