CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeatng-switch
developthewebz
developthewebz

Reputation: 1937

Dynamic ng-switch inside of ng-repeat

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

Upvotes: 1

Views: 1699

Answers (2)

Michael Bates
Michael Bates

Reputation: 1934

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!

Upvotes: 0

Ignacio Villaverde
Ignacio Villaverde

Reputation: 1264

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>

Upvotes: 1

Related Questions