Dynamic data table in angular js

Question

I want to create a dynamic data table in angular js which has first column with check box. The data would be in Json format as below,

$scope.items = [
        { "id": "1", "lastName": "Test1", "firstName": "Test", "email": "[email protected]" },
        { "id": "2", "lastName": "Test2", "firstName": "Test", "email": "[email protected]" },
        { "id": "3", "lastName": "Test3", "firstName": "Test", "email": "[email protected]" },
        { "id": "4", "lastName": "Test4", "firstName": "Test", "email": "[email protected]" },
        { "id": "5", "lastName": "Test5", "firstName": "Test", "email": "[email protected]" }
    ];

The id would be a column with checkbox and all other columns will have the data in it. The headers of the table are also dynamic and so does the column.

How to create a dynamic table in angularjs with first column as checkbox using above json? — Rajashree Pethkar
– Rajashree Pethkar, Commented Jan 4, 2018 at 12:32

Ujjwala Bollam · Accepted Answer · 2018-01-04 13:18:59Z

0

If the columns are dynamic

<table style="width:100%">
  <tr ng-repeat="item in items | limitTo:1">
   <th ng-repeat="(key,value) in item">{{key}}</th>
   <td  ng-repeat="(key,value) in item">
    <div ng-show="key == 'id'">
     <input type="checkbox" value={{value}} name="id" />
    </div>
    <div ng-show="key != 'id'">
     {{value}}
    </div>
   </td>
  </tr>
 </table>

ng-repeat does JSON ordering for keys, To get ID first follow skipping the JSON ordering Skip JSON ordering (because your JSON has ID first after skipping JSON ordering you will get ID first)

edited Jan 4, 2018 at 13:18

answered Jan 4, 2018 at 12:53

Ujjwala Bollam

1599 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rajashree Pethkar Over a year ago

The columns are dynamic so I cannot write, <td>{{item.lastName}}</td>

Rajashree Pethkar Over a year ago

This is a very helpful answer.

Collectives™ on Stack Overflow

Dynamic data table in angular js

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related