I am currently working on creating a playlist for a music player within an Angular app that includes a shuffle feature. The actual shuffle function is not the issue, as I am utilizing the Fisher Yates Shuffle method and it is functioning correctly. When the shuffle button is clicked, the shuffle function is called:
$scope.shuffle = function(){
$scope.shufflePlaylist = angular.copy($scope.playlist);
//// Then shuffle the array
var i = $scope.shufflePlaylist.length, t, m;
for(var i = $scope.shufflePlaylist.length - 1; i > 0; i--){
m = Math.floor(Math.random() * i);
t = $scope.shufflePlaylist[m];
$scope.shufflePlaylist[m] = $scope.shufflePlaylist[i];
$scope.shufflePlaylist[i] = t;
}
}
I create a separate array with the shuffled playlist to maintain the original playlist for un-shuffling purposes. Using angular.copy prevents the original playlist from getting shuffled along with the shuffled one (as they share references).
However, this approach disconnects the two arrays completely, preventing any actions performed on tracks (like/unlike) in one list from reflecting in the other. Is there a way to have both playlists independent of each other but with shared references among individual objects?
Link to Plunkr: http://plnkr.co/edit/a0wpSwatnDlNSBanK7HP?p=preview