Dynamic ng-switch inside of ng-repeat

Question

I am trying to create a switch based on a dynamic array of objects...

For example:

  <div ng-switch on="currentItem">
    <div ng-repeat="item in myItems" ng-switch-when="item.name">
      <p>{{item.name}}</p>
      <button ng-click="nextItem(item)">Next Item</button>
    </div>
  </div>

And then in my controller...

  $scope.myItems = [{
      "name": "one"
    }, {
      "name": "two"
    }]
    // Default first item
  $scope.currentItem = $scope.myItems[0].name;

  $scope.nextItem = function(med) {
    for (var i = 0; i < $scope.myItems.length; i++) {
      if ($scope.currentItem === $scope.myItems[i].name) {
        if ($scope.myItems[i + 1] !== undefined) {
          $scope.currentItem = $scope.myItems[i + 1].name
        }
      }
    }
  }

Basically, the dom should render a div for each of the items, and when a user clicks the Next Item button, currentItem should be updated, and the switch should trigger based on that.

I am not seeing the first result as I should (nothing is being rendered). Any help would be greatly appreciated.

Plunk: http://plnkr.co/edit/PF9nncd1cJUNAjuAWK22?p=preview

score 1 · Accepted Answer · answered Dec 23 '15 at 18:49

1

I have forked your plunkr: http://plnkr.co/edit/A9BPFAVRSHuWlmbV7HtP?p=preview

Basically you where not using ngSwitch in a good way.

Just use ngIf:

<div ng-repeat="item in myItems">
  <div ng-if="currentItem == item.name">
    <p>{{item.name}}</p>
    <button ng-click="nextItem(item)">Next Item</button>
  </div>
</div>

answered Dec 23 '15 at 18:49

Ignacio Villaverde

1,264
1
11
15

This works properly. Thank you for that. I checked out what was rendered to the dom, and item.name was not being rendered with the switch so it must not be allowed. Thanks again for the help. – developthewebz Dec 23 '15 at 18:53

score 0 · Answer 2 · answered Dec 23 '15 at 18:56

I've forked your plunkr: http://plnkr.co/edit/2doEyvdiFrV74UXqAPZu?p=preview

Similar to Ignacio Villaverde, but I updated the way your getting the nextItem().

$scope.nextItem = function() {
    var next = $scope.myItems[$scope.myItems.indexOf($scope.currentItem) + 1];
    if(next) {
      $scope.currentItem = next;
    }
  }

And you should probably keep a reference in currentItem to the entire object, not just the name:

<div ng-repeat="item in myItems">
<div ng-if="item == currentItem">
  <p>{{item.name}}</p>
  <button ng-click="nextItem(item)">Next Item</button>
</div>

Much simpler!

Dynamic ng-switch inside of ng-repeat

2 Answers2