从ngRepeat更新$ scope变量

Question

I have a ngRepeat loop in a view and for every item I have a custom toggle control connected to a $scope variable like this:

<a ng-repeat="item in items" ng-click="isOn = !isOn" ng-class="{on: isOn}">
   Toggle!
</a>

When a link is clicked the isO n variable is toggled as expected, but only for the item clicked . I would expect all items are updated as isOn is defined in controller as $scope.isOn = false

When I toggle the variable using controller method all items are updated!

<a ng-repeat="item in items" ng-click="toggle()" ng-class="{on: isOn}">
   Toggle!
</a>

--- controller ---

$scope.toggle = function() {
    $scope.isOn = !$scope.isOn;
}

Can you explain this behaviour? Is it because ngRepeat is creating a separate scope for every item?

Answer 1

Yes, ngRepeat is creating a separate scope for every item. See AngularJS ngRepeat

The ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope...

Edit: from @doodeec comment

You could toggle a parent scope instead. ng-click="$parent.isOn = !$parent.isOn"