0

What I'm trying to achieve:
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.

Current Problem:
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.

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'!

I would really appreciate some help on this, I don't mind having to rewrite all my code to figure this out!

Thank you in advance for all the support!

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' -- //
  $scope.nextDress = function() {
    var next = parseInt(currentID) + 1 > 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 < 0 ? dressArray.length - 1 : parseInt(currentID) - 1;
    $state.go('main.rail', {id: prev });
  };

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>

enter image description here

Final Update (Answer) @SarjanDesai

  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) > newDressArray.length ? newDressArray[newDressArray.length - 1] : newDressArray[currentIndex + 1];
  var prev = (currentIndex - 1) < 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);
Improve this question
2
  • Add fiddle link of your working code Commented Oct 14, 2015 at 8:34
  • Morning @SarjanDesai the project is too complexed for Fiddle or Plnkr, I could forward you the Git URL if you would like to dive into the code? Commented Oct 14, 2015 at 9:06

2 Answers 2

Reset to default
1

Seeing the HTML that generates your button would be helpful. But as far as I can see something like <button>{{dressArray[currentId].id}} </buuton> should show the array value at index currentId

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

5 Comments

Morning @Andre, I've added the HTML to the above snippet!
Ok, I misunderstood your question. But adding this to your buttons for testing should still help you to check the current values: <md-button ng-click="nextDress()">Next {{dressArray[currentId].id}}</md-button>
Morning again @Andre, I tried {{dressArray[currentId].id}} and nothing showed up, I also checked the log and there wasn't any errors either?
I've added a screenshot above, this will show you the available state id's, if the page is '2' within the array the next page/state will be '10' and previous state would be '1'! I'm trying to get the buttons to know which state is next when clicking through the states/pages!
I still think that {{dressArray[currentId]}} (little correction here) should display the value you are looking for. Consider logging that value to the console as well.
0

What below code does is get current index of currentID and check the avaibility of next or previous value for previous button and for next button. If next value not available, it set to last value and for previous button if previous value is not available, then set it to first value of array.

$scope.nextDress = function() {
  var currentIndex = $scope.dressArray.indexOf(currentID.toString());
  var next = (currentIndex + 1) > $scope.dressArray.length ? $scope.dressArray[dressArray.length - 1] : $scope.dressArray[currentIndex + 1];
  $state.go('main.rail', next);
};
// -- If currentID = '2', The next button should display '4'--//
$scope.previousDress = function() {
  var currentIndex = $scope.dressArray.indexOf(currentID.toString());
  var prev = (currentIndex - 1) < 0 ? $scope.dressArray[0] : $scope.dressArray[currentIndex - 1];
  $state.go('main.rail', prev);
};

Look for demo Example:

angular.module('myApp', []).controller('myCtrl', ['$filter', '$scope',
  function($filter, $scope) {
    $scope.myclick = function() {

      var currentID = 1;
      console.log('current state : ' + currentID);

      var bodyType = 'triangle';

      var dressArray = [{
        "id": "1",
        "bodyType": "triangle"
      }, {
        "id": "2",
        "bodyType": "triangle"
      }, {
        "id": "3",
        "bodyType": "round"
      }, {
        "id": "4",
        "bodyType": "triangle"
      }];

      var removeRound = $filter('filter')(dressArray, function(value, index) {
        return value.bodyType == bodyType;
      });

      var dressArray = [];

      angular.forEach(removeRound, function(value, key) {
        dressArray.push(value.id);
      });

      console.log(dressArray);

      nextDress = function() {
        var currentIndex = dressArray.indexOf(currentID.toString());
        var next = (currentIndex + 1) > dressArray.length ? dressArray[dressArray.length - 1] : dressArray[currentIndex + 1];
        console.log('next dress : ' + next);
      };
      // -- If currentID = '2', The next button should display '4'--//
      previousDress = function() {
        var currentIndex = dressArray.indexOf(currentID.toString());
        var prev = (currentIndex - 1) < 0 ? dressArray[0] : dressArray[currentIndex - 1];
        console.log('prev dress : ' + prev);
      };
      previousDress();
      nextDress();
    }
  }
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <button ng-click="myclick()">Button</button>
</div>

Improve this answer

5 Comments

When clicking 'NEXT' I get the following URL error: #/main/rail/%5Bobject%20Object%5D
when clicking next or previous the state id changes to '1' no matter how many times either of the buttons are clicked! I've attached a screenshot above to show you the console.log!
Yes, it has some mistake...Mistake corrected..Check updated answer
Check the answer..Added snippet to understand how it works and check console for log...
Let us continue this discussion in chat.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.