AngularJS - 为NG-重复启动和NG-重复的高端单控制器

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一个范围，切换的功能仅仅是一个例子。

Answer 1

想出一个办法做呢：

<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; 
}); 

Answer 2

是的。您需要使用该项目的$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功能。