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>

AngularJS 如何在 ng-repeat 中再次打乱数据？

AngularJS How to shuffle data again in ng-repeat?

javascript

angularjs

ng-repeat