更改ng-repeat内部呈现的ng-include模板

Question

I've got an ng-repeat where each of the instances contains an ng-include . Like so:

<li ng-repeat="item in items">
    <div class="item-actions" ng-include="actionsTemplate"></div>
</li>

I would now like to be able to set and remove the actionsTemplate source with the click of a button in the same scope, like so:

<li ng-repeat="item in items">
    <div class="item-actions" ng-include="actionsTemplate"></div>
    <button ng-click="toggleActionsTemplate()">Toggle Actions</button>
</li>

So clicking the button would trigger a function toggleActionsTemplate() to set the actionsTemplate source to foo , or if it's already set to foo , set it to null to remove the template.

I've tried doing this but can't figure out how get a controller function to target the template inside the same ng-repeat instance the function is being called from.

Is this possible, and more importantly, is this a good way of going about achieving this behaviour?

Answer 1

Here is a plunker: http://plnkr.co/edit/4p56QeuqpMAH1yc0tbfy?p=preview

• You need to initialize a different actionsTemplate variable for each child scope inside ngRepeat .
• You can use ngInit to initialize a scope variable.

An example:

<li ng-repeat="item in items" ng-init="action = actionsTemplate">
    <div class="item-actions" ng-include="action"></div>
    <button ng-click="action = toggleAction(action)">Toggle Actions</button>
</li>

controller:

$scope.toggleAction= function(action){
  return action === 'foo' ? null : 'foo';
}