ishmam shahriar ishmam shahriar - 3 months ago 11
AngularJS Question

Adding static header name while making dynamic table

I am making a table which row & column depend on JSON

JSON:

$scope.dataToShow=[

tableHeder=["First Name","Age"],

{
name:"rahim",
age:23
},
{
name:"karim",
age:24
}
];


My code:

<table>
<tr>
<th>Select</th>
<th ng-repeat="header in dataToShow.tableHeader"></th>
</tr>
<tr ng-repeat="row in dataToShow">
<td>
<input type="checkbox">
</td>
<td ng-repeat="item in row">{{item}}</td>
</tr>
</table>


I want my view like:

Select Name age




checkbox rahim 23




checkbox karim 24




But my I am getting:

Select




Checkbox Name age




Checkbox rahim 23




Checkbox karim 24

How can I solve it???

Answer

if the JSON response is not from backend, do some modifications

JSON:

$scope.dataToShow={

        tableHeder:["First Name","Age"],

        tableData: [{
            name:"rahim",
            age:23
        },
        {
            name:"karim",
            age:24
        }]
    };

HTML:

<table>
      <tr>
         <th>Select</th>
         <th ng-repeat="header in dataToShow.tableHeader">{{header}}</th>
      </tr>
      <tr ng-repeat="row in dataToShow.tableData">
           <td>
               <input type="checkbox">
           </td>
            <td >{{row.name}}</td>
            <td >{{row.age}}</td>
        </tr>
 </table>

This will definitely work