AngularJS Next and Previous Array Values

Question

What I'm trying to achieve:
Change state when the user clicks previous or next, each state is assigned an id and will need to figure out which id is previous or next before changing previous or next state.

Current Problem:
I have managed to display the current state id '1' and I have managed to group all the other id's within an array but I don't know how to get the next and previous buttons to trigger the right previous or next states on click.

Please find my code below, I've added comments/notes to point things out.

Any help/advice would be helpful!
Thank you.

Controller JS

  // -- 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' -- //
  // -- If currentID = '2', The next button should display '4'--//
  $scope.nextDress = function() {
    $state.go('main.rail', {id: idhere });
  };
  // -- If currentID = '1', The previous button should display '4' -- //
  // -- If currentID = '2', The previous button should display '1' -- //
  $scope.previousDress = function() {
    $state.go('main.rail', {id: idhere });
  };

HTML

<li class="next"><md-button ng-click="nextDress()">Next</md-button></li>
<li class="previous"><md-button ng-click="previousDress()">Previous</md-button></li>

taxicala · Accepted Answer · 2015-10-13 15:33:06Z

0

check that the currentId + 1 is not greater than the length of the array for the next item (if greater, go to the first) and check that the currentId - 1 is not less than 0, if yes, go to the last item (to make it cyclic):

 $scope.nextDress = function() {
    var next = parseInt(currentId) + 1 > dressArray.length ? 0 : parseInt(currentId) + 1;
    $state.go('main.rail', {id: next });
  };

  $scope.previousDress = function() {
    var prev = parseInt(currentId) - 1 < 0 ? dressArray.length - 1 : parseInt(currentId) - 1;
    $state.go('main.rail', {id: prev });
  };

answered Oct 13, 2015 at 15:33

taxicala

21.8k7 gold badges41 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user4495161 Over a year ago

Morning @taxicala the above snippet seemed to work but instead of picking up the state ID within the array it was picking up the array index id. How would we now change this to work the with array state id's instead?

Icycool · Accepted Answer · 2015-10-13 15:49:11Z

0

I would make the data like a closed linked list, run this every time after passing through filter.

var currentItem; // keep a reference of current item
var arrayToLL = function(arr){
  for (var i = 0; i < arr.length; i++) {
    var item = arr[i];
    if (i == 0) item.prev = arr[arr.length - 1];
    else item.prev = arr[i - 1];

    if (i == arr.length - 1) item.next = arr[0];
    else item.next = arr[i + 1];

    if (item.id == currentId) { // you may get currentId from $stateParams
      currentItem = item;
    }
  }
}

$scope.nextDress = function() {
  $state.go('main.rail', {id: currentItem.next.id });
};

$scope.previousDress = function() {
  $state.go('main.rail', {id: currentItem.prev.id });
};

answered Oct 13, 2015 at 15:49

Icycool

7,1991 gold badge27 silver badges33 bronze badges

2 Comments

Icycool Over a year ago

@adamkwadsworth I didn't run it but it should get the id instead of the array index. You can give it a try and see how it does. Even better if you can understand it and implement your own idea.

user4495161 Over a year ago

Morning @lcycool I tried the above and nothing seemed to happen! I guess as it was untested it may not be working! Have you got any further suggestions???

Collectives™ on Stack Overflow

AngularJS Next and Previous Array Values

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related