2

JS

$scope.mode = "test"
$scope.array = ['test1', 'test2', 'test3']

HTML

<div ng-switch on="mode">
    <div ng-repeat="item in array" ng-switch-when="test">
        Test {{item}}
    </div>
</div>

When I do this the above, the output I get is 

Test Test Test

It can't seem to access item. If I remove the ng-switch-when then it works fine.

PSL
  • 123,204
  • 21
  • 253
  • 243
allenylzhou
  • 1,431
  • 4
  • 19
  • 36

1 Answers1

6

It is because ng-switch creates a child scope and same applies for ng-repeat. ng-repeat runs at priority 1000 and ng-switch at 800. So the child scope created by ng-repeat on each of the repeated div elements gets overwritten by ng-switch, so the ng-repeat assigned child scope on the element is gone ultimately. A possibly way could be to wrap your ng-switch outside ng-repeat since you anyways do not want to evaluate the ng-switch expression for every repeated element. This is with the 1.2 version.

Now from 1.3.x version of angular the priority of ng-switch has been revise to 1200 and ng-repeat remains at 1000, so ng-repeated scope will prevail, since it is of lower priority now and it will work in that case.

Plnkr

PSL
  • 123,204
  • 21
  • 253
  • 243
  • Thanks. This is a great answer. Wish there was a debugger to use that can help me visualize the scopes in case I run into a similar problem in the future. – allenylzhou Sep 04 '14 at 22:31
  • @allenylzhou Upgrade to latest version of angular and you should be good. – PSL Sep 04 '14 at 22:38