angular, swapping content from array, how to manage first and last

Question

I am swapping content based on a loaded in array (so the length of the array will be dynamic each time) and I'm trying to figuire out how to handle the first and last item in this method. As in - I need when you click left from the first one it would go to the last and opposite for the last.

So I just have this -

 <div class="side{{side.name}} side" ng-repeat="side in sides" ng-show="side.active" >
            {{side.name}}
            <i class="fa fa-chevron-circle-left" ng-click="flipLeft($index)"></i>
            <i class="fa fa-chevron-circle-right" ng-click="flipRight($index)"></i>
        </div>

and in the controller it just looks like this

$scope.flipLeft = function (index){
    $scope.sides[index].active = false;
    $scope.sides[index-1].active = true;

};

$scope.flipRight = function (index){
    $scope.sides[index].active = false;
    $scope.sides[index+1].active = true;

};

So all it really does is swap the .active to true or false to show or hide the content. I'm not sure how to switch around my logic so it loops around so that if you click left on the first item it goes to the last and visa versa. Thanks in advance!

Just look at size of your `sides` array. and compare when you go < 0 or over index value at last position. — Mike Brant, Dec 15 '14 at 17:46

score 1 · Answer 1 · edited May 23 '17 at 12:05

The easiest way is to use the mod method so that incrementing or decrementing stays in the range of valid numbers. So looking at your code I would recommend

$scope.flipLeft = function (index){
    $scope.sides[index].active = false;
    index = (index-1).mod($scope.sides.length)
    $scope.sides[index].active = true;    
};

And be sure to implement this trick: Javascript modulo not behaving.

score 1 · Accepted Answer · answered Dec 15 '14 at 17:46

Check if the index you want to set is greater than or less than the minimum/maximum values. If so, adjust:

$scope.flipLeft = function (index){
    var idx = index - 1;

    if (idx < 0) {
       idx = $scope.sides.length - 1;
    }
    $scope.sides[index].active = false;
    $scope.sides[idx].active = true;
};

$scope.flipRight = function (index){
    var idx = index + 1;
    if (idx >= $scope.sides.length) {
       idx = 0;
    }
    $scope.sides[index].active = false;
    $scope.sides[idx].active = true;
};

score 1 · Answer 3 · answered Dec 15 '14 at 17:47

$scope.flipLeft = function (index){
    var sides = $scope.sides,
        first = index,
        second = (index === 0) ? sides.length - 1 : first - 1;

    sides[first].active = false;
    sides[second].active = true;

};

$scope.flipRight = function (index){
    var sides = $scope.sides,
        first = index,
        second = (index === sides.length - 1) ? 0 : first + 1;

    sides[first].active = false;
    sides[second].active = true;
};

angular, swapping content from array, how to manage first and last

3 Answers3