Question

这是我的代码：

<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>

第一个函数ng-if="person.expanded" ng-click="person.expanded = false"有效，但第二个没有。是通过多次ng-repeat-end？ Plunker：http://plnkr.co/edit/g1t4pludTTIAJYKTToCK?p=preview 左侧是+，右侧不是。提前感谢您的回答！

Answer 1

您必须在最后一个tr元素中只放置一个ng-repeat-end

更新代码：

<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>

可扩展表AngularJS

1 个答案: