CODEWITHSUNDEEP
javascripthtmlangularjs
Alexander Bondarenko
Alexander Bondarenko

Reputation: 207

Angular ng-repeat over multiple table rows and ng-show

Here is a table:

<tbody ng-repeat="objs in Objects" ng-click="Click()">
    <tr>
        <td><img src="{{objs.img}}">{{objs.name}}</td>
        <td>{{objs.owner}}</td>
        <td>{{objs.timeSt}}</td>
        <td>{{objs.state}}</td>
        <td><progressbar animate="false" value="dynamic" type="success"><b>{{objs.metrics.Test}}%</b></progressbar></td>
        <td><progressbar animate="false" value="dynamic" type="success"><b>{{objs.metrics.Test}}%</b></progressbar></td>
        <td><progressbar animate="false" value="dynamic" type="success"><b>{{objs.metrics.Test}}%</b></progressbar></td>
        <td><progressbar animate="false" value="dynamic" type="success"><b>{{objs.metrics.Test}}%</b></progressbar></td>
    </tr>
    <tr ng-show="param"><td colspan="8">lol</td></tr>
    </tbody>

I need to make a visible row by clicking and hide others that were visible.

Upvotes: 3

Views: 793

Answers (1)

hoeni
hoeni

Reputation: 3290

Pretty sure you do not want to loop over the tbody element but on tr elements.

For repeating over multiple elements there are the ng-repeat-start and ng-repeat-end directives in AngularJS:

<table>
  <tr ng-repeat-start="a in [1,2,3,4]">
    <td ng-click="param=!param">show second row</td>
  </tr>
  <tr ng-repeat-end ng-if="param">
    <td>ja</td>
  </tr>
</table>

For your example that would result in

<tbody>
<tr ng-repeat-start="objs in Objects" ng-click="param=!param">
    <td><img src="{{objs.img}}">{{objs.name}}</td>
    <td>{{objs.owner}}</td>
    <td>{{objs.timeSt}}</td>
    <td>{{objs.state}}</td>
    <td><progressbar animate="false" value="dynamic" type="success"><b>{{objs.metrics.Test}}%</b></progressbar></td>
    <td><progressbar animate="false" value="dynamic" type="success"><b>{{objs.metrics.Test}}%</b></progressbar></td>
    <td><progressbar animate="false" value="dynamic" type="success"><b>{{objs.metrics.Test}}%</b></progressbar></td>
    <td><progressbar animate="false" value="dynamic" type="success"><b>{{objs.metrics.Test}}%</b></progressbar></td>
</tr>
<tr ng-repeat-end ng-show="param"><td colspan="8">lol</td></tr>
</tbody>

Upvotes: 2

Related Questions