Question

我熟悉AngularJS并整理了一个简单的随机抽取应用程序。我有四个按钮，可以让你画画＆＃34;来自两个甲板中的任何一个的一张或两张牌（由两个单独的JSON文件表示）。在构建时，我的示例应用程序主要是工作 - 但是如果单击当前正在显示的套牌按钮（您以相同的顺序获得相同的确切数据），则不会发生随机化。。如果你点击从其他套牌中抽取，然后再返回，它只会重新随机化。

我仍然被一些Angular＆＃34;魔法＆＃34;迷住了，我可以看到每次点击都会触发过滤器 ...所以我在这个问题上留下了挠头。

这是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使用数组的顺序，对范围中数组的更改将自动反映在视图中。

fiddle

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

1 个答案: