Ania Ksyta Ania Ksyta - 3 months ago 8
HTML Question

single th in tr with ng-repeat

Cant I display one value of th element in tr with ng-repeat?

This is how my html looks

<div class="center layout-column flex">
<section layout="row" layout-align="left left">
<md-button class="md-primary" ng-click="vm.showDialogAdd($event)">Add new movie</md-button>
<md-button class="md-primary" ng-click="vm.showDialogDetails($event)">Add details</md-button>
</section>
<div class="simple-table-container md-whiteframe-4dp">
<div class="ms-responsive-table-wrapper">
<table class="simple" ms-responsive-table>
<thead>
<tr>
<th>Title</th>
<th>Year</th>
<th>Country</th>
<th class="text-center">Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="movie in vm.movies">
<td>{{ movie.title }}</td>
<td>{{ movie.year }}</td>
<td>{{ movie.country }}</td>
<td class="text-center">
<md-button class="md-warn" ng-click="vm.deleteMovie(movie)">Remove</md-button>
<md-button class="md-noink" ng-click="vm.showDetails(movie)">Details</md-button>
</td>
</tr>
<tr ng-repeat-end ng-show="movie._detailsVisible" ng-repeat="detail in vm.movieDetails">
<th>Actors: </th>
<td>
{{ detail.name }}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>


enter image description here

I want to display "Actors:" like a title of all tds, something like that:

enter image description here

How can I do this?

Answer

Just move ng-repeat to td

<tr ng-repeat-end ng-show="movie._detailsVisible">
      <th>Actors: </th>
      <td ng-repeat="detail in vm.movieDetails">
        {{ detail.name }}
      </td>
</tr>