AngularJS：在每個ng-click上重新隨機化ng-repeat

我熟悉AngularJS並製作一個簡單的隨機繪製應用程序。我有四個按鈕，允許您從兩個平臺中的任意一個「繪製」一張或兩張卡片（由兩個單獨的JSON文件表示）。在構建時，我的示例應用程序主要是的作品 - 但如果單擊當前顯示的套牌的按鈕（您以相同的確切順序獲取相同的確切數據），則不會發生隨機化...只會重新隨機化你點擊從其他甲板，然後再回來。AngularJS：在每個ng-click上重新隨機化ng-repeat

我還是被一些Angular的「魔術」弄糊塗了，我可以看到過濾器是被觸發每次點擊...所以我留下了我的頭在這一個。

這裏的HTML ...

<div ng-controller="Cards"> 

    <p> 
     <button ng-click="whichDeck=franchises;qty=1;shuffle=undefined">DRAW FRANCHISE</button><button ng-click="whichDeck=franchises;qty=2">X2</button> 
    </p> 

    <p> 
     <button ng-click="whichDeck=twists;qty=1">DRAW TWIST</button><button ng-click="whichDeck=twists;qty=2">X2</button> 
    </p> 

    <ul class="cards"> 
     <li class="card" ng-repeat="card in whichDeck | shuffle | limitTo:qty"> <!-- filter:query --> 
      <h2>{{card.Title}}</h2> 
      <h3 ng-show="card.Origin">{{card.Origin}}</h3> 
      <p>{{card.Description}}</p> 
     </li> 
    </ul> 
</div>

這裏的JS ...

var app = angular.module('myApp',['Shuffle']); 

app.controller('Cards', ['$scope', '$http', function($scope, $http) { 

    var controller = this; 

    $scope.franchises = []; 
    $scope.twists = []; 
    $scope.deck = ''; 

    $http.get('js/franchises.json').success(function(data){ 
     $scope.franchises = data; 
    }); 
    $http.get('js/twists.json').success(function(data){ 
     $scope.twists = data; 
    }); 

}]); 

var shuffle = angular.module('Shuffle', []); 

shuffle.filter('shuffle', function() {  
    var shuffledArr = [], 
     shuffledLength = 0; 
    return function(arr) { 
     if (typeof(arr)==='undefined') 
      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; 
    }; 
});

來源

2014-07-03 Matt van Andel

兩件事情。首先，事實證明，我使用（從另一個StackOverflow的線程）的洗牌過濾器被設計成不刷新。其原因在於，當您在過濾器中執行這種複雜操作（過濾器運行LOT並因此具有限制）時，Angular會將瘋狂的摘要錯誤拋出。第二：通過將濾波器拖出濾波器並將其放入控制器中，可以避免消解錯誤問題，並在每次單擊時獲得全新的洗牌。謝謝，Mosho！ –

下面是一個如何可以做到這一點的例子，我覺得你的方式過於複雜的事情。

HTML：

<div ng-app="" ng-controller="Ctrl"> 
    <button ng-click="shuffle(obj)">shuffle</button> 
    <div ng-repeat="o in obj"> 
     {{o}} 
    </div> 
</div>

JS：

function Ctrl($scope) { 
    $scope.obj = [1,2,3,4,5,6,7,8,9] 

    //generic shuffling function 
    $scope.shuffle = function(o){ 
     for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x); 
     return o; 
    }; 
};

ng-repeat使用數組的順序，和在範圍陣列變化將在自動的視圖中反映出來。

fiddle

來源

2014-07-03 01:48:57 Mosho

AngularJS：在每個ng-click上重新隨機化ng-repeat

回答

相關問題