AngularJS-用于ng重复开始和ng重复结束的单控制器

我有这个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>

对于每个重复的元素，我希望将相同的

ClientCtrl

实例应用于

ng repeat start

和

ng repeat end

，以便

isExpanded

可以从

ng repeat start

内部切换，并通过

ng repeat end

访问

可能吗

编辑：

---

我不是在寻找使切换工作的变通方法，我真正想要的是能够跨

ng repeat start

和

ng repeat end

共享一个范围，切换的功能只是一个例子。

是的。您需要使用项目的

$index

，以便能够单独切换每个项目

HTML:

扩大

---

并相应地更新

开关expand

功能。

想出了一种方法：

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


angular.module('app').controller('ClientCtrl', function($scope){
   $scope.vm = {
       isExpanded: false,
       toggleExpand: function(){
           $scope.vm.isExpanded = !$scope.vm.isExpanded;
       }
   }
}).controller('ClientEndCtrl', function($scope){
    // vm is a shared view model across ng-repeat-start and ng-repeat-end
    $scope.vm = $scope.$$prevSibling.vm;
});

扩大
角度.module（'app'）.controller（'ClientCtrl'，function（$scope）{
$scope.vm={
isExpanded:错，
toggleExpand:function（）{
$scope.vm.isExpanded=！$scope.vm.isExpanded；
}
}
}).controller（'ClientEndCtrl'，函数（$scope）{
//vm是跨ng repeat start和ng repeat end的共享视图模型
$scope.vm=$scope.$$previsibling.vm；
});

问题是关于在ng repeat start和ng repeat end之间共享作用域的更广泛问题。我把问题编辑得更清楚了。

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

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


angular.module('app').controller('ClientCtrl', function($scope){
   $scope.vm = {
       isExpanded: false,
       toggleExpand: function(){
           $scope.vm.isExpanded = !$scope.vm.isExpanded;
       }
   }
}).controller('ClientEndCtrl', function($scope){
    // vm is a shared view model across ng-repeat-start and ng-repeat-end
    $scope.vm = $scope.$$prevSibling.vm;
});