10

您如何以随机顺序在 AngularJS 中排序项目列表？我在想内置orderBy过滤器会起作用，但我不确定如果不向模型添加一些额外数据如何。像这样的东西会很棒。

item in items | orderBy:random

我的下一个想法是创建一个自定义过滤器，但如果已经有更好的东西可用，我宁愿避免这种情况。

4

2 回答 2

17

编辑警告！: 这些结果有偏差，不要用这个。在进一步编辑之前，此答案仅作为警告。

解释：任何项目在第一个位置的机会应该是相等的，但是在 10,000 次迭代（例如 6 个项目）之后的实际百分比机会最终是

1：~28%，2：~10%，3：~14%，4：~20%，5：~12%，6：~15%

https://jsfiddle.net/sh0ber/km9cqvpf/

orderBy可以接受一个函数参数，就像array.sort你可以使用上面的 HTML 并random在范围内定义一个函数一样：

$scope.random = function(){
    return 0.5 - Math.random();
};

这将返回一个随机值，有时为负，有时为正，有时为 0，这将对数组进行随机排序。

于 2013-06-14T06:20:43.793 回答
6

做一个快速的小提琴 sh0ber 方法似乎效果很好：http: //jsfiddle.net/owenmead/fa4v8/1/

<div ng-controller="MyCtrl">
  <p ng-repeat="i in list|orderBy:random">{{i}}</p>
</div>

function MyCtrl($scope) {
  $scope.list = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
  $scope.random = function() {
    return 0.5 - Math.random();
  }
}

Angular 的 orderBy 在列表的副本上使用 JavaScript 的 sort()。查看另一个答案，某些浏览器在其类别中是稳定的，而其他浏览器则不是。也许只是在几个浏览器中测试小提琴，你应该很高兴： Array.sort Sorting Stability in different Browsers

PS。无法评论 sh0ber 的回答，因为我没有 50 个代表

于 2013-06-14T17:08:17.357 回答