Create table using angularjs / ng-repeat

Angularjs create table

  In Angularjs we can create table from json object very easily without using more <td> and <tr> tags. Just we need to put the ng-repeat in the <tr> tag.

Assign the JSON object

  First we need to assign all the data into json object. In the following json object having name and country property.

<div ng-app="" ng-init="names = [{name:'Merbin',country:'India'},{name:'Franklin',country:'Saudi'},{name:'Rajesh',country:'America'},{name:'Samraj',country:'Denmark'}];">
------
------
</div>

Create Looping table

  Here no need to write repeat <tr> and <td> tags, just assign your heading and next you can write all the data in a single step.

<table border="2px">
    <tr>
        <th>
            Name
        </th>
        <th>
            Country
        </th>
    </tr>

    <tr ng-repeat="x in names">
        <td>
            {{ x.name}}
        </td>
        <td>
            {{x.country}}
        </td>
    </tr>

</table>

Example Program:- (Editor)

Output:-

Advertisement