AngularJS如何在ng-repeat中重新洗牌數據？

Question

我正在製作一個簡單的網頁， 它只是在頁面加載時顯示一個隨機引號。

我帶來了JSON數據，並用以下

app.filter('shuffle', function() { 
var shuffledArr = [], 
shuffledLength = 0; 
return function(arr) { 
    var o = arr.slice(0, arr.length); 
    if (shuffledLength == arr.length) return shuffledArr; 
    for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x); 
     shuffledArr = o; 
    shuffledLength = o.length; 
    return o; 
}; 

過濾器，我使用這個過濾器像

<section id="bg" ng-controller="QuoteCtrl"> 
    <div class="wrap_quote" ng-repeat="quote in quotes | shuffle | limitTo:1"> 
    <pre class="quote">{{ quote.gsx$said.$t }}</pre> 
    <p class="from">{{ quote.gsx$from.$t }}</p> 
    </div> 
</section> 

的問題是，我怎麼能不加載刷新頁面新的隨機數據？ 我試過了。

$scope.loadData = function() { 
http.get("https://spreadsheets.google.com/feeds/list/1e3oNuL79PBq-xSvpovbppM5j4aUzgzHfkl5c6x1HzAc/od6/public/values?alt=json") 
    .success(function(response) { 
    $scope.quotes = response.feed.entry; 
    }); 
} 

$scope.loadData(); 

和HTML

<button ng-click="loadData()">RELOAD</button> 

，但什麼都沒有發生...... 請幫幫我！

http://plnkr.co/edit/RYcGMf?p=preview

Answer 1

你loadData()按鈕控制器之外。你需要把它的控制器內是這樣的：

<section id="bg" ng-controller="QuoteCtrl"> 
    <div class="wrap_quote" ng-repeat="quote in quotes | shuffle | limitTo:1"> 
     <span>「</span> 
     <pre class="quote">{{ quote.gsx$said.$t }}</pre> 
     <p class="from">{{ quote.gsx$from.$t }}<u>{{ quote.gsx$as.$t }}</u></p> 
    </div> 
    <button ng-click="loadData()">RELOAD</button> 
    </section> 

編輯：根據反饋，我採取了第二次看你的代碼，我想我更好地瞭解你正在嘗試做的。您甚至不需要一遍又一遍地調用頁面重新加載。你只需要加載你的數據一次，並且每次你想洗牌時都打電話給你的洗牌過濾器。以下是如何做到這一點。添加一個方法調用你這樣的控制器內部的過濾器：

$scope.shuffleData = function(){ 
    $scope.quotes = $filter('shuffle')($scope.quotes); 
}; 

然後改變你的按鈕來調用這個方法，而不是loadData()方法：

<button ng-click="shuffleData()">RELOAD</button> 

而在你的過濾器擺脫shuffledLength = o.length;的功能。希望這可以幫助。

看到它在這Plunker已從您的版本更新。

Answer 2

重新加載數據不會再次洗牌，因爲數據不會再次顯示div。您需要洗牌，而不是內聯HTML。

這裏有一個辦法做到這一點：http://plnkr.co/edit/VBR0IXYMEYOMU9avOW52?p=preview

var shuffle = function(array) { 
    var currentIndex = array.length, 
    temporaryValue, randomIndex; 

    // While there remain elements to shuffle... 
    while (0 !== currentIndex) { 

    // Pick a remaining element... 
    randomIndex = Math.floor(Math.random() * currentIndex); 
    currentIndex -= 1; 

    // And swap it with the current element. 
    temporaryValue = array[currentIndex]; 
    array[currentIndex] = array[randomIndex]; 
    array[randomIndex] = temporaryValue; 
    } 

    return array; 
} 

$scope.loadData = function() { 
    http.get("https://spreadsheets.google.com/feeds/list/1e3oNuL79PBq-xSvpovbppM5j4aUzgzHfkl5c6x1HzAc/od6/public/values?alt=json") 
    .success(function(response) { 
     $scope.quotes = shuffle(response.feed.entry); 
    }); 
} 

<section id="bg" ng-controller="QuoteCtrl"> 
    <div class="wrap_quote" ng-repeat="quote in quotes | limitTo:1"> 
    <pre class="quote">{{ quote.gsx$said.$t }}</pre> 
    <p class="from">{{ quote.gsx$from.$t }}</p> 
    </div> 
    <button ng-click="loadData()">RELOAD</button> 
</section>