编辑：

Question

我有一个ng-repeat如下：

RequestAccessAsync

我希望在将<ul> <li ng-repeat="o in villes | limitTo:5"><a href="#">{{o.nomVille}}</a></li> </ul>列表限制为villes之前随机重新排序5列表，因此每次打开页面时，每次都会得到5个不同的villes。

在angularjs中是否有一个过滤器可以为我做这个？

编辑：

我创建了一个costum过滤器来随机化该列表，如下所示：

.filter('random', function() {
  return function(val) {
    let shuffle = (a) => {
      let r = [];
      while (arr.length)
        r.push(
          arr.splice( (Math.floor(Math.random() * arr.length)) , 1)[0]
        );

      return shuffle(val);
    }
  };
});

在ng-repeat中我这样做了：

<li ng-repeat="o in villes | random | limitTo:5"><a href="#">{{o.nomVille}}</a></li>

但我不能再在页面中看到任何内容。

这是关于jsfiddle的例子：https://jsfiddle.net/z10wwhcv/

Answer 1

您必须构建自定义过滤器功能，使订单随机化，然后以正确的顺序应用过滤器（在限制之前随机）。

详细了解一下：

Using AngularJS how could I randomize the order of a collection?

Answer 2

如果您希望每次加载页面时更改订单，则无法将其作为过滤器进行更改，因为这可能会在每个摘要周期中发生变化。您需要在某处将villes存储在范围内，并在页面加载时以随机顺序生成它，例如在该页面的控制器功能中。

Answer 3

使用控制器中的过滤器（这也是最佳实践性能提升）：

$scope.shuffled = $filter('random',$scope.villes)

您需要在控制器中注入服务

这是您的过滤器应该是什么样的（未经过测试但应该有效）：

 .filter('random', function() {
          return function(a) {

              var r = [];
              while (a.length)
                r.push(
                  a.splice((Math.floor(Math.random() * a.length)), 1)[0]
                );
              return r;
          }
        }

Answer 4

这是我创建的解决方案：

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

http://jsfiddle.net/aimad_majdou/6mngvo38/

在ng-repeat中随机重新排序列表

编辑：

4 个答案: