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>