Expandable Table AngularJS

Question

Here's my code:

<tbody>
      <tr ng-repeat-start="person in people">
        <td>
          <button ng-if="person.expanded" ng-click="person.expanded = false">-</button>
          <button ng-if="!person.expanded" ng-click="person.expanded = true">+</button>
        </td>

        <td>{{person.name}}</td>
        <td>{{person.gender}}</td>
        <td>
          <button ng-if="person.expanding" ng-click="person.expanding = false">-</button>
          <button ng-if="!person.expanding" ng-click="person.expanding = true">+</button>
        </td>
      </tr>
      <tr ng-if="person.expanded" ng-repeat-end="">
        <td colspan="3">{{person.details}}</td>
      </tr>
      <tr ng-if="person.expanding" ng-repeat-end="">
        <td colspan="3">{{person.gender}}</td>
      </tr>
    </tbody>

First function ng-if="person.expanded" ng-click="person.expanded = false" works, but second not. Is it through multiple ng-repeat-end? Plunker : http://plnkr.co/edit/g1t4pludTTIAJYKTToCK?p=preview + on left side works, on right not. Thanks for answers in advance!

Drakkin · Accepted Answer · 2017-08-16 11:45:04Z

1

You have to put only one ng-repeat-end at the last tr element

updated code :

<tbody>
  <tr ng-repeat-start="person in people">
    <td>
      <button ng-if="person.expanded" ng-click="person.expanded = false">-</button>
      <button ng-if="!person.expanded" ng-click="person.expanded = true">+</button>
    </td>

    <td>{{person.name}}</td>
    <td>{{person.gender}}</td>
    <td>
      <button ng-if="person.expanding" ng-click="person.expanding = false">-</button>
      <button ng-if="!person.expanding" ng-click="person.expanding = true">+</button>
    </td>
  </tr>
  <tr ng-if="person.expanded">
    <td colspan="3">{{person.details}}</td>
  </tr>
  <tr ng-if="person.expanding" ng-repeat-end="">
    <td colspan="3">{{person.gender}}</td>
  </tr>
</tbody>

answered Aug 16, 2017 at 11:45

Drakkin

90812 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Expandable Table AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related