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

重新加载数据不会再次进行混洗，因为数据不会再次渲染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>

Answer 2

您的!按钮位于控制器外部。您需要将它放在控制器中，如下所示：

script#dieTemplate(type='text/template')
    .die(class!='value-<%= value %>')
        i.fa.fa-circle
        i.fa.fa-circle
        i.fa.fa-circle
        i.fa.fa-circle
        i.fa.fa-circle
        i.fa.fa-circle
        i.fa.fa-star

编辑：根据反馈，我再看一下您的代码，我想我更了解您要做的事情。您甚至不需要反复调用页面重新加载。您只需加载一次数据，并在每次想要随机播放时调用您的随机播放过滤器。这是怎么做的。添加一个方法来调用控制器内的过滤器，如下所示：

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()。希望这会有所帮助。

在您的版本更新的Plunker中查看。

AngularJS如何在ng-repeat中再次混洗数据？

2 个答案: