我正在 Angular 中构建一个音乐站点,用户可以在其中通过单击随机播放按钮来随机播放歌曲。我可以使用以下代码进行随机播放:
var shuffleArray = function(array) {
var m = array.length, t, i;
// While there remain elements to shuffle
while (m) {
// Pick a remaining element…
i = Math.floor(Math.random() * m--);
// And swap it with the current element.
t = array[m];
array[m] = array[i];
array[i] = t;
}
return array;
}
$scope.shuffleThis = function(tracks){
shuffleArray(tracks);
}
我想不通的是如何允许用户在不刷新页面或调用原始 JSON 响应的情况下恢复到原始订单。
更新:
所以我使用了以下代码,本质上是克隆数组以便以后使用它,但是我遇到了一个问题。当我去打乱数组时(将 $scope.tracks 绑定(bind)到 $scope.unshuffled),它正在设置父 Controller 的 $scope.tracks。我目前的结构是:mainCtrl 设置在 html 标记中,这是 shuffle/unshuffle 函数所在的位置。然后每个页面 url 都有一个 Controller 。为了给您一些背景信息,这是我正在构建的网站...
www.beta.audiblecoffee.com
如您所见,如果您开始播放歌曲,底部的播放器控件就会出现。当您单击一次随机播放按钮(右下角)时,歌曲随机播放。然后你再次点击 shuffle 按钮,没有任何反应......现在如果你选择一个顶部导航项目(New,Popular,Shuffled 等),原始有序数组将短暂出现,然后是该特定页面的新 $scope.tracks Controller 将覆盖 unshuffle 函数中的 $scope.tracks。但是,如果您单击另一个顶部导航项,则会发生同样的情况。所以我想我的问题是如何将未改组的数组设置为子 Controller $scope.tracks?
var shuffleArray = function(array) {
var m = array.length, t, i;
// While there remain elements to shuffle
while (m) {
// Pick a remaining element…
i = Math.floor(Math.random() * m--);
// And swap it with the current element.
t = array[m];
array[m] = array[i];
array[i] = t;
}
return array;
}
$scope.shuffleThis = function(tracks) {
$scope.isShuffled = true;
$scope.unshuffled = tracks.slice(0);
shuffleArray(tracks);
console.log(player.tracks);
}
$scope.unshuffleThis = function() {
$scope.isShuffled = false;
player.tracks = $scope.unshuffled;
$scope.tracks = $scope.unshuffled;
}
最佳答案
这里的想法是使用一个中间引用,从不实际修改原始播放列表
var originalArray = [1,2,3];
var playlist = originalArray;
function shufflePlaylist() {
playlist = shuffleArray(originalArray.slice());
}
function restoreOriginalPlaylist() {
playlist = originalArray;
}
作为旁注:这并不是一个真正的 Angular 问题,您只需要在之后将它绑定(bind)到范围即可。
关于javascript - 洗牌后恢复到原始数组顺序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28700640/