Angular, Ionic Swappable Grid does not swap the right elements - angularjs

Question

On the following project: https://github.com/pc-magas/faster
I generate a grid like that:
<div ng-repeat="(i,row) in grid.value" class="row">
<div ng-repeat="(j,item) in row" class="col">
<img on-swipe-up="swipeup({{i}},{{j}})" on-swipe-down="swipeDown({{i}},{{j}})" on-swipe-left="swipeLeft({{i}},{{j}})" on-swipe-right="swipeRight({{i}},{{j}})" src="{{item.icon}}"/>
</div>
</div>
And His is the code on my controller:
.controller('Game',function($scope,$state,$ionicModal,Game,MenuItem)
{
/*###################### Modal Area ######################*/
$ionicModal.fromTemplateUrl('gameOverModal.html',
{
scope: $scope,
animation: 'slide-in-up'
})
.then(function(modal)
{
$scope.gameOverModal = modal;
});
$scope.$on('$destroy', function()
{
$scope.gameOverModal.remove();
});
$scope.closeGameOverModal=function()
{
$scope.gameOverModal.hide();
$state.go("menu");
}
/*###############################################################*/
/*################### Controller Initialization ####################*/
var GameItem=Game.item;
var GameClass=Game.game;
/*##################### End Controller Initialization ##############*/
/**
*Function That does all the dirty job for initialization
*/
var init_game=function()
{
console.log(Game.current_game);
if(typeof Game.current_game === 'undefined' || Game.current_game === null)
{
/**
*Items for the Game
*/
var items=[
new GameItem('img/icon1.jpg','img/icon1.jpg','img/icon1.jpg','trolley'),
new GameItem('img/icon2.jpg','img/icon2.jpg','img/icon2.jpg','metro'),
new GameItem('img/icon3.jpg','img/icon3.jpg','img/icon3.jpg','bus'),
new GameItem('img/icon4.jpg','img/icon4.jpg','img/icon4.jpg','tram'),
];
/**
*Callbacks for Game
*/
var callbacks={
'pause':function(time)
{
console.log("Game Paused");
$state.go('menu');
},
'afterInit':function(game)
{
MenuItem.items.play.name_="Continue Game";
MenuItem.items.play.clickFunction=function()
{
console.log("clicked");
$state.go('game');
Game.current_game.play();//Do not comment unlsess game will not resume
};
/*Making An Option For saving*/
var saveItem=new MenuItem.MenuItem("Save Game",'regular-btn',"",false,function()
{
game.save();
});
//Add on the top an Option to save the game
MenuItem.items.others.unshift(saveItem);
console.log(MenuItem.items.others);
},
'over':function()
{
ionic.EventController.trigger('gameOver',{});
}
};
Game.current_game=new GameClass(items,60,5,5,callbacks,$scope);
Game.current_game.init();
}
else // We may need to go to another page and return Therefore we must need a way to resume
{
console.log("Here resuming the game");
Game.current_game.play();
}
$scope.timer = Game.current_game.timer;
$scope.points=Game.current_game.getScore();
$scope.grid=Game.current_game.grid;
/*Functions that do all the swipe*/
$scope.swipeup=function(i,j)
{
Game.current_game.swap(i,j,'up');
$scope.grid=Game.current_game.grid;
};
$scope.swipeDown=function(i,j)
{
Game.current_game.swap(i,j,'down');
};
$scope.swipeLeft=function(i,j)
{
Game.current_game.swap(i,j,'left');
};
$scope.swipeRight=function(i,j)
{
Game.current_game.swap(i,j,'right');
};
/*End of: "Functions that do all the swap"*/
};
ionic.EventController.on('gameOver',function()
{
console.log("GameOver Event");
MenuItem.items.play.name_="New Game";
MenuItem.items.others.shift();
Game.current_game=null;
$scope.gameOverModal.show();
});
init_game();
$scope.pause=function()
{
console.log("Pausing Game");
Game.current_game.pause();
}
});
As you can See the lines that does the swap are:
/*Functions that do all the swipe*/
$scope.swipeup=function(i,j)
{
Game.current_game.swap(i,j,'up');
$scope.grid=Game.current_game.grid;
};
$scope.swipeDown=function(i,j)
{
Game.current_game.swap(i,j,'down');
};
$scope.swipeLeft=function(i,j)
{
Game.current_game.swap(i,j,'left');
};
$scope.swipeRight=function(i,j)
{
Game.current_game.swap(i,j,'right');
};
/*End of: "Functions that do all the swap"*/
};
And on my service the functions that does the swap is:
game.swap=function(i,j,direction)
{
console.log("i: "+i,"j: "+j)
switch(direction)
{
case 'up':
if(i!==0) //Cannot swap first line elements
{
console.log("Can swap Up");
swapAction(i,j,i-1,j);
}
break;
case 'down':
if(i!==game.grid.value.length-1) //cannot swap last line elements
{
console.log("Can swap Down");
swapAction(i,j,i+1,j);
}
break;
case 'left':
if(j!==0) //Cannot swap first column elements
{
console.log("Can swap Left");
swapAction(i,j,i,j-1);
}
break;
case 'right':
if(j!==game.grid.value[i].length-1) //Cannot swap last column elements
{
console.log("Can swap Right");
swapAction(i,j,i,j+1);
}
break;
}
};
var swapAction=function(i,j,newi,newj)
{
var temp=game.grid.value[i][j];
game.grid.value[i][j]=game.grid.value[newi][newj];
game.grid.value[newi][newj]=temp;
}
As I noticed after a few swaps the swapped elements are not the correct one. Eg. If an element is in Position 4,3 and I swap with the element in the position 4,4 then in initially swaps but I cannot swap it back.
And this happend because the {{i}} and {{j}} passed as parameters are not the correct one. Do you have an Idea how on swipe will get the correct {{i}} and {{j}} each time?
One soulution That I thought is what If "baptized" each element with a unique number and look for the posizition of each element on the loop but I think is not the best one performance-wize.
An another solution that I thought is for each swappable object to have an swipe() method but still I will need to find the Object's Coordinates on the grid. Also for that I am not too sure if it is Possible.

Answer 1

Finally I solved it by doing this:
I chaned the GameItem like that:
function GameItem(icon,icon_destroyed,icon_marked,name,unique)
{
item.unique=(unique)?unique:0;//A unique number for new items
...
item.uniqueId=function()
{
return item.name+item.unique;
}
....
item.clone=function()
{
var newClone=new GameItem(item.icon,item.icon_destroyed,item.icon_marked,item.name,item.unique);
item.unique++;//After a clone refresh the unique number in order the next clones to have new name
return newClone;
}
}
Also now on the services on Game I set a new method:
game.swapById=function(unique,direction)
{
for(var i=0;i<game.grid.value.length;i++)
{
for(var j=0;j<game.grid.value[i].length;j++)
{
var item=game.grid.value[i][j];
console.log(item.uniqueId(),unique);
if(item.uniqueId()===unique)
{
game.swap(i,j,direction);
return;
}
}
}
}
Therefore I look for a uniqie Id ;)
SO my html is:
<div ng-repeat="(i,row) in grid.value" class="row">
<div ng-repeat="(j,item) in row" class="col">
<img on-swipe-up="swipeup('{{item.uniqueId()}}')" on-swipe-down="swipeDown('{{item.uniqueId()}}')" on-swipe-left="swipeLeft('{{item.uniqueId()}}')" on-swipe-right="swipeRight('{{item.uniqueId()}}')" src="{{item.icon}}"/>
</div>
</div>
And I call the following methods from the controller:
$scope.swipeup=function(unique)
{
Game.current_game.swapById(unique,'up');
};
$scope.swipeDown=function(unique)
{
Game.current_game.swapById(unique,'down');
};
$scope.swipeLeft=function(unique)
{
Game.current_game.swapById(unique,'left');
};
$scope.swipeRight=function(unique)
{
Game.current_game.swapById(unique,'right');
};
I think is a helpfull solution ;)