Clever Geek Handbook

Angular ng-repeat for 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 the line visible by clicking and hide others that were visible.

+3


source to share


1 answer


Pretty sure you don't want to iterate over the element tbody

, but in tr

.

To repeat, there are several elements directives ng-repeat-start

and ng-repeat-end

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>


In 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>
+2


source






More articles:


All Articles