CODEWITHSUNDEEP
javascriptangularjs
bafix2203
bafix2203

Reputation: 541

Expandable Table AngularJS

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!

Upvotes: 0

Views: 155

Answers (1)

Drakkin
Drakkin

Reputation: 908

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>

Upvotes: 1

Related Questions