Ng-switch doesn't work inside ng-repeat

Question

When i.typ is changed the ng-switch doesn't update in the below code. Maybe this has to do with the ng-repeat oustide the switch? On page reload it works but not when model is changed.

<div id="sceneCtrl" ng-controller="SceneController">

    <transform id="{{'annotation'+i.ID}}" ng-repeat="i in vm.sharedService.SceneAnnotations">
        <group ng-switch on="{{i.typ}}">
            <transform ng-switch-when="0" > [subtree 0...] </transform>
            <transform ng-switch-when="1" > [subtree 1...] </transform>
        </group>
    </transform>

</div>

DRiFTy · Accepted Answer · 2014-03-19T12:28:29.823

2

Remove the curly brackets from your on="{{i.typ}}".

Try this instead:

<group ng-switch on="i.typ">

edited Mar 19 '14 at 12:28

answered Mar 19 '14 at 12:20

DRiFTy

11,269
11
61
77

score 2 · Answer 2 · answered Mar 19 '14 at 12:31

I put together an example of what an ng-switch looks like inside of an ng-repeat. In order to make the example work I did replace your variables but the idea and syntax are exactly the same:

<div ng-repeat="player in myPlayers">
  <!-- just so you can see the repeat is working normally: -->
  Player: <span class="playername" ng-bind="player.name"></span>

  <!-- here is the switch: -->
  <div ng-switch on="player.gameRole">
    <div ng-switch-when="IT">YOU ARE IT</div>
    <div ng-switch-when="NOT IT">This player is NOT it</div>
  </div>
  <br /><br />
</div>

To see this live, look at a plunker here: http://plnkr.co/edit/0lbqKjlgo1Y8aLNMoGNs?p=preview

As to your other question of why the switch doesn't change when the value of a variable changes there are a few reasons this might happen. The most common reason is because you are in a directive or somewhere that "$scope.$apply()" isn't getting called for you. Add this line in and it should work (probably)!

Best of luck!

Ng-switch doesn't work inside ng-repeat

2 Answers2