AngularJS table details and sample code, angularjs sample code

AngularJS table details and sample code, angularjs sample code

Lattice data is usually repeated in nature. The ng-repeat command can be used to easily draw tables. The following example shows how to use the ng-repeat command to draw a table.

<table>  <tr>   <th>Name</th>   <th>Marks</th>  </tr>  <tr ng-repeat="subject in student.subjects">   <td>{{ subject.name }}</td>   <td>{{ subject.marks }}</td>  </tr></table>

You can use the CSS style to set the style of a table as follows:

<style>table, th , td {  border: 1px solid grey;  border-collapse: collapse;  padding: 5px;}table tr:nth-child(odd) {  background-color: #f2f2f2;}table tr:nth-child(even) {  background-color: #ffffff;}</style>

Example

The following example shows all the preceding commands.

TestAngularJS.html

Output

Open textangularjs.html in the webbrowser and see the following results:


The above is the basic knowledge of AngularJS tables. We will continue to sort out the relevant knowledge in the future. Thank you for your support for this site!