javascript - AngularJS:在每次 ng-click 上重新随机化 ng-repeat

Question

我正在熟悉 AngularJS 并编写一个简单的随机绘制应用程序。我有四个按钮，允许您从两副牌中的任意一副中“抽取”一张或两张牌(由两个单独的 JSON 文件表示)。构建后，我的示例应用程序大部分都可以工作 - 但如果单击当前显示的牌组的按钮，则不会发生随机化(您会以相同的顺序获得相同的数据)...仅当您单击从其他牌组中抽奖，然后再次返回时，才会重新随机。

我仍然对 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;
    };
});

Answer 1

这是一个如何实现这一点的示例，我认为你把事情过于复杂化了。

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 使用数组的顺序，作用域中数组的更改将自动反射(reflect)在 View 中。

fiddle