title: AngularJS Next and Previous Array Values
body: <p><strong>What I'm trying to achieve:</strong><br/>
  Change state id when the user clicks next or previous buttons. Each state is assigned an id which is within an array, when clicking next or previous the state id needs to know which is the next or previous id within the array.</p>
  
  <p><strong>Current Problem:</strong><br/>
  After spending many hours yesterday, I managed to get the next and previous buttons working but instead of picking up the state id from the array it was getting the array index number.</p>
  
  <p>The test below show this array ["1", "2", "4"], so if I was on state '2' the next page would be '4' and the previous would be '1', instead of '0','1','2'!</p>
  
  <p>I would really appreciate some help on this, I don't mind having to rewrite all my code to figure this out! </p>
  
  <p>Thank you in advance for all the support!</p>
  
  <p><strong>Controller JS</strong></p>
  
  <pre><code>  // -- Current Page ID, '1'-- //
    var currentID = $stateParams.id;
    // -- Body Type, 'triangle' -- //
    var bodyType = $scope.$storage.userData.bodyType.bodyType;
    // --  Dress Array, [{"id": "1", "bodyType": "triangle"},{"id": "2", "bodyType": "triangle"},{"id": "3", "bodyType": "round"},{"id": "4", "bodyType": "triangle"}] --//
    var dressArray = $scope.$storage.appData.dresses;
    // -- Remove anything that doesn't match the current body Type e.g Remove 'round' -- //
    var removeRound = $filter('filter')(dressArray, function(value, index) {return value.bodyType == bodyType;});
    // -- Dress Array -- //
    $scope.dressArray = [];
    // -- Push each filter value to Array, ["1", "2", "4"] -- //
    angular.forEach(removeRound, function(value, key) {
      $scope.dressArray.push(value.id);
    });
    // -- Console Test, ["1", "2", "4"] -- //
    console.log($scope.dressArray);
    // -- If currentID = '1', The next button should display '2' -- //
    $scope.nextDress = function() {
      var next = parseInt(currentID) + 1 &gt; dressArray.length ? 0 : parseInt(currentID) + 1;
      $state.go('main.rail', {id: next });
    };
    // -- If currentID = '2', The next button should display '4'--//
    $scope.previousDress = function() {
      var prev = parseInt(currentID) - 1 &lt; 0 ? dressArray.length - 1 : parseInt(currentID) - 1;
      $state.go('main.rail', {id: prev });
    };
  </code></pre>
  
  <p><strong>HTML</strong><br/></p>
  
  <pre><code>&lt;li class="next"&gt;&lt;md-button ng-click="nextDress()"&gt;Next&lt;/md-button&gt;&lt;/li&gt;
  &lt;li class="previous"&gt;&lt;md-button ng-click="previousDress()"&gt;Previous&lt;/md-button&gt;&lt;/li&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/7oACw.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7oACw.jpg" alt="enter image description here"></a></p>
  
  <p><strong>Final Update (Answer)</strong> @SarjanDesai</p>
  
  <pre><code>  var currentID = $stateParams.id;
    var bodyType = $scope.$storage.userData.bodyType.bodyType;
    var dressArray = $scope.$storage.appData.dresses;
    var removeRound = $filter('filter')(dressArray, function(value, index) {return value.bodyType == bodyType;});
    var newDressArray = [];
    angular.forEach(removeRound, function(value, key) {
      newDressArray.push(value.id);
    });
    var currentIndex = newDressArray.indexOf(currentID.toString());
    var next = (currentIndex + 1) &gt; newDressArray.length ? newDressArray[newDressArray.length - 1] : newDressArray[currentIndex + 1];
    var prev = (currentIndex - 1) &lt; 0 ? 0 : newDressArray[currentIndex - 1];
    if(prev === 0 || prev === undefined || prev === null){
      $scope.hidePrevButton = {
        active: true
      };
    }
    if(next === 0 || next === undefined || next === null){
      $scope.hideNextButton = {
        active: true
      };
    }
    $scope.nextDress = function() {
      $state.go('main.rail', {'id': next});
    };
    $scope.previousDress = function() {
      $state.go('main.rail', {'id': prev});
    };
    //console.log(newDressArray);
    //console.log('Next: ' + next);
    //console.log('Current: ' + currentID);
    //console.log('Previous: ' + prev);
  </code></pre>