Commander des données avec un filtre personnalisé à l'intérieur de la directive ng-repeat dans AngularJS

Arri

J'ai des données comme ceci :

{
  games":[
     {
      "id":"AAA",
      "name":"Joker Double Up",
     },
     {
        "id":"BBB",
        "name":"Joker Wild Up",
     },
     {
        "id":"CCC",
       "name":"Joker Wild Double Up",
     },
     {
        "id":"DDD",
        "name":"Wild Double Up",
     },
     {
        "id":"EEE",
        "name":"Joker Wild Double",
     }
  ]
}

(ça vient du back-end, donc je ne peux pas éditer ici), et l'afficher dans ng-repeat.

Je veux commander ces données comme ceci 

var order =  ['CCC' , 'AAA' , 'BBB' , 'EEE' , 'DDD'] //from CCC to DDD

(il n'a aucune déclaration logique, juste une commande personnalisée)

Comment puis-je écrire ces règles pour ma fonction orderBy ? Merci d'avance.

Slava Utesinov

Comme vous avez des problèmes de performances, vous ne devez pas utiliser | filter, car il sera exécuté à chaque $digestcycle. Vous devez appeler orderFnmanuellement lorsque les règles de tableau ou de tri sont modifiées. Dans le cas de 3 000 lignes, le temps de tri est d'environ 2 s.

angular.module('app', [])
.controller('MyController', ['$scope', function($scope) {
    var data = {
      "games":[
       {
        "id":"AAA",
        "name":"Joker Double Up",
       },
       {
          "id":"BBB",
          "name":"Joker Wild Up",
       },
       {
          "id":"CCC",
         "name":"Joker Wild Double Up",
       },
       {
          "id":"DDD",
          "name":"Wild Double Up",
       },
       {
          "id":"EEE",
          "name":"Joker Wild Double",
       }
    ]
  };
  
  var input = [];
  for(var i = 0; i < 600; i++)
    input = input.concat(data.games);
  var order =  ['CCC' , 'AAA' , 'BBB' , 'EEE' , 'DDD'];
  
  function orderFn(array, order){
     return array.sort(function(a, b){
      return order.indexOf(a.id) - order.indexOf(b.id);
    });
  }
  
  console.time('orderFn');
  $scope.output = orderFn(input, order);
  var a = console.timeEnd('orderFn');
  
}])
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>

<ul ng-app='app' ng-controller="MyController">
   <li ng-repeat='game in output track by $index'>{{game | json}}</li>
</ul>

Articles connexes