AngularJS shuffle 和 limitTo 一个列表

Question

我想使用 AngularJS 来显示打乱后的列表——但只显示前几个元素。目前，我在 HTML 模板中同时执行改组和限制，如 this fiddle 中所示。 :

<li ng-repeat="value in array | shuffle | limitTo:1">
    {{value}}
</li>

这工作正常，但是当列表中的项目多于显示的项目时，会导致 Angular 超过 10 次 $digest 迭代，如示例所示。据我所知，正在发生的事情是某些东西正在监视列表的过滤和有限值，当所有元素不会始终显示时，它很可能会发生变化。

我应该如何在不破坏 Angular 的情况下实现这种效果？当然，它仍然可以正常工作，但效率低下并且可能表明我正在做的事情不正确，应该以其他方式实现。

显而易见的解决方案是在列表显示之前在 Controller 中打乱列表 - 但我确实希望每次用户更新 View 时显示的元素选择都会发生变化。

编辑:这是一个better example我正在努力实现的目标 - 该应用程序现在允许您在两个列表之间切换，每次都会对列表进行打乱和限制。

Answer 1

如前所述 - Angular 等待表达式稳定。因此，最好的方法是在将数组传递给 View 之前对其进行洗牌。无论如何，有一些技巧可以帮助您保持清洁。

http://jsfiddle.net/zc3YH/3/

在这个 fiddle 中，我们缓存洗牌结果，同时长度保持不变。因此，不是在数组更改时而是在长度更改时重新排列数组。您可以实现更复杂的缓存行为。因此，主要思想是只对同一个数组进行洗牌一次，并且只在数组更新时重新洗牌。

当前的过滤器实现非常糟糕，因为它只缓存单个数组，所以如果你使用这个过滤器两次 - 它会被破坏。因此，缓存应该使用类似于数组的 hashKey 来区分不同的数组。

shufflemodule.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;
    };
});

无论如何，修改过滤器范围内的数据不是好的做法。如果您需要共享这个打乱后的数组 - 在您的 Controller /服务/...中打乱它。因此，var o = arr.slice(0, length) 复制该数组，因此我们保留原始数组未修改。