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功能。