Clever Geek Handbook

AngularJS is the only controller for ng-repeat-start and ng-repeat-end

I have this 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>

And this is JS:

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

For each repeating element I want to have one and the same instance ClientCtrl

is applicable to both ng-repeat-start

, and to ng-repeat-end

so that isExpanded

you can switch out ng-repeat-start

and accessed through ng-repeat-end

.

Is it possible?

EDIT:

I'm not looking for workarounds to get the toggle switch to work, which is what I really want to be able to swap scope in ng-repeat-start

and out ng-repeat-end

, and the functionality of the toggle is just an example.

+3


source to share


2 answers


Consider how to do it:



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


source


Yes it is. You will need to use the $index

item to be able to toggle each one separately.

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>

And update the function toggleExpand

accordingly.

+1


source






More articles:


All Articles