AngularJS - ng-repeat-start 和 ng-repeat-end 的单一 Controller

Question

我有这个 HTML:

<table>
  <tr ng-repeat-start="client in clients" ng-controller="ClientCtrl">
     <td ng-click="toggleExpand()">
        Expand
     </td>
     <!-- some html -->
  </tr>
  <tr ng-show="isExpanded" ng-repeat-end>
     <!-- some html -->
  </tr>
</table>

还有这个 JS:

angular.module('app').controller('ClientCtrl', function($scope){
   $scope.isExpanded= false;
   $scope.toggleExpand = function(){
       $scope.isExpanded = !$scope.isExpanded;
   }
});

对于每个重复的元素，我希望 ClientCtrl 的相同实例应用于 ng-repeat-start 和 ng-repeat-end，以便 isExpanded 可以从 ng-repeat-start 内部切换，并且可以通过 ng-repeat-end 访问。

这可能吗？

编辑:

我不是在寻找使切换工作的变通方法，我真正想要的是能够在 ng-repeat-start 和 ng-repeat-end 之间共享一个范围，toggle 的功能只是一个例子。

Answer 1

是的。您需要使用项目的 $index 才能单独切换每个项目。

HTML:

<table>
  <tr ng-repeat-start="client in clients" ng-controller="ClientCtrl">
     <td ng-click="toggleExpand($index)">
        Expand
     </td>
     <!-- some html -->
  </tr>
  <tr ng-show="isExpanded($index)" ng-repeat-end>
     <!-- some html -->
  </tr>
</table>

并相应地更新 toggleExpand 函数。