AngularJS洗牌和limitTo列表 [英] AngularJS shuffle and limitTo a list
问题描述
我想使用AngularJS显示一个洗牌名单 - 但只有前几个元素。此刻，我执行这两个洗牌和在HTML模板，在这个小提琴限制：
I want to use AngularJS to display a shuffled list - but only the first couple of elements. At the moment, I perform both the shuffling and limiting in the HTML template, demonstrated in this fiddle:
<li ng-repeat="value in array | shuffle | limitTo:1">
{{value}}
</li>
这工作正常，但导致角超过10 $摘要迭代时，有列表比显示更多的项目，如本例。这是怎么回事，因为据我所知，是的东西是看名单，这是极有可能变化时，不会始终显示的所有元素的筛选和有限的价值。
This works fine, but causes Angular to exceed 10 $digest iterations when there are more items in the list than are shown, as in the example. What is happening, as far as I can tell, is that something is watching the filtered and limited value of the list, which is highly likely to change when there all the elements will not always be displayed.
我应该如何实现不破角这种效果呢？当然，它仍然有效像它应该，但它的效率低下，可能是一个迹象表明，我在做什么是不正确的，应该可以实现一些其他的方式。
How should I achieve this effect without breaking Angular? Of course, it still works like it should, but it's inefficient and probably an indication that what I'm doing is incorrect and should be achieved some other way.
显而易见的解决方案是重新洗牌在控制器列表中曾经显示之前 - 但我确实想要显示的每个用户更新视图时改变元素的选择
The obvious solution is to shuffle the list in the controller before it is ever displayed - but I do want the selection of elements displayed to change each time the user updates the view.
编辑：这里有一个 的更好的例子是我想要实现 - 应用程序现在可以让你两个列表，其中获得洗牌，每一次的限制之间切换
here's a better example of what I'm trying to achieve - the app now lets you switch between two lists, which get shuffled and limited each time.
推荐答案
由于之前mentoined - 对于前pression角等待得到稳定。
所以，最好的办法，就是通过它来查看之前洗牌数组。
无论如何，有一些技巧，这将有助于你保持清洁。
As mentoined before - angular waits for an expression gets stabilized. So, the best way, is to shuffle an array before passing it to view. Anyway, there are some tricks, that would help you to keep it clean.
在此，我们捣鼓缓存洗牌的结果，而长度保持不变。所以，你得到阵列改组而不是当一个数组的变化，但是当它的长度改变。您可以实现更复杂的缓存行为。因此，主要的想法是洗牌同一阵列只有一次，洗牌只在阵列更新。
In this fiddle we cache shuffle result, while a length keeps the same. So, you get array reshuffled not when an array changes, but when it length changed. You can implement more complex caching behavior. So, the main idea is to shuffle the same array only once, and reshuffle it only on array update.
当前滤波器的实现是非常糟糕的，因为它仅缓存单一阵列中，因此，如果你两次使用此过滤器 - 它会被打破。因此，缓存应该使用类似hashKey一个数组不同不同的阵列来完成。
Current filter implementation is really bad, cause it caches only single array, so if you would use this filter twice - it would be broken. So, caching should be done using something like hashKey for an array to differ different arrays.
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;
};
});
总之，这是不好的做法，在过滤器中修改范围的数据。如果你需要这个洗牌阵列共享 - 洗牌它在你的控制器/服务/ ......所以，变种O = arr.slice（0，长度）复制该数组，因此，我们继续originar数组不被修改。
Anyway, it is not good practice to modify data in scope within a filter. If you need this shuffled array be shared - shuffle it in your controller/service/.... So, var o = arr.slice(0, length) copies that array, thus we keep originar array unmodified.
这篇关于AngularJS洗牌和limitTo列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
