CODEWITHSUNDEEP
javascriptangularjshtml-table
Navi
Navi

Reputation: 151

Ng-repeat is not working as expected in html table?

Why doesn't this simple table structure work in angularjs? None of the rows gets populated with the data. If I replace span with tr, it works fine but my third column of Percent doesn't fit in well.

<table class="table table-hover">
 <tbody>
    <tr>
         <th>Grade</th>
         <th>Point</th>
         <th>Percent</th>
   </tr>
   <tr>
          <span ng-repeat="gdata in gradepoints">
             <td ng-repeat="(grade, gp) in gdata"> {{grade | uppercase}} </td>
             <td ng-repeat="(grade, gp) in gdata"> {{gp}} </td>
           </span>
           <span ng-repeat="pdata in percents">
              <td ng-repeat="(grade, perc) in pdata"> {{perc}} </td>
           </span>
    </tr>
   </tbody>
 </table>

Upvotes: 1

Views: 81

Answers (2)

Jason Goemaat
Jason Goemaat

Reputation: 29234

Try this:

<tr ng-repeat="gdata in gradepoints">
    <td>{{gdata.grade | uppercase}}</td>
    <td>{{gdata.gp}}</td>
    <td>{{pdata[$index].perc</td>
</tr>

You want one row for each element in the gdata array, so the ng-repeat needs to be on the <tr> element. If the two arrays aren't in sync, you can create a function in your controller to return the pdata element you need:

$scope.findPdata(gdata, index) {
    // ... do your magic here to find the pdata element you want
    return result;
}

<td>{{findPdata(gdata, $index)}}</td>

Upvotes: 1

Rishul Matta
Rishul Matta

Reputation: 3493

guessing from the below:

        <tr>
                  <th>Grade</th>
                 <th>Point</th>
                  <th>Percent</th>
       </tr>

i guess your table has 3 columns so your each row has 3 columns?

in that case use the following

<tr ng-repeat="gdata in gradepoints">

  <td>{{gdata.grade | uppercase}}</td>
 <td>{{gdata.gp}}</td>
   <td>{{gdata.percent}}</td>


</tr>

for above to work your gradepoints must be an ARRAY containing objects with 3 properties each i.e. grade,gp,percent

Upvotes: 0

Related Questions