訂單數據NG重複指令內

我的數據是這樣的：訂單數據NG重複指令內

{ 
    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", 
    } 
    ] 
}

（其來自後端，所以我不能在這裏做編輯），並顯示在NG-重複。

我想訂購這樣

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

這個數據（其還沒有任何邏輯語句，只需按訂單生產）

我怎麼能寫這個規則，我的排序依據功能？在此先感謝。

來源

2017-07-02 Arik Donowan

對於這種情況，你需要編寫自定義過濾器。在這裏你可以查看更多細節如何實現：https：//docs.angularjs.org/guide/filter –

如果你沒有邏輯順序，不要使用order by，即使你可以顯示每個數組的位置使用'ng-repeat'。例如：' {{:: data.games [2] .name}} {{:: data.games [0] .name}}'...如果後端的順序可以改變，通過id屬性找到它。我可以給你一個例子，如果你想... –

嗨@ The.Bear，在我真的有更多的2000個項目，只爲使用ng重複。 –

由於您在性能方面存在問題，因此不應使用| filter，因爲它將在每個$digest週期執行。在更改數組或排序規則時，應手動調用orderFn。在3k行時間的情況下分類約2s。

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>

來源

2017-07-03 06:45:42

您可以定義自定義排序，以獲得訂單，如果你不想改變現有的陣列，您可以自定義在角如下篩選，希望這有助於

angular.module("myApp", []).controller("myCrtl", function($scope) { 
 
    $scope.games = [{ 
 
    "id": "AAA", 
 
    "name": "Joker Double Up" 
 
    }, { 
 
    "id": "BBB", 
 
    "name": "Joker Wild Up" 
 
    }, { 
 
    "id": "CCC", 
 
    "name": "Joker Wild Double Up" 
 
    }, { 
 
    "id": "CCC", 
 
    "name": "Joker Wild Double Up1" 
 
    }, { 
 
    "id": "DDD", 
 
    "name": "Wild Double Up" 
 
    }, { 
 
    "id": "AAA", 
 
    "name": "Joker Double Up" 
 
    }, { 
 
    "id": "EEE", 
 
    "name": "Joker Wild Double" 
 
    }]; 
 
}).filter("myOrder", function() { 
 

 
    return function(input) { 
 
    input.sort(function(a, b) { 
 

 
     function getNumber(str) { 
 
     switch (str) { 
 
      case "CCC": 
 
      return 1 
 
      case "AAA": 
 
      return 2 
 
      case "BBB": 
 
      return 3 
 
      case "EEE": 
 
      return 4 
 
      case "DDD": 
 
      return 5 
 
     } 
 

 
     } 
 
     return getNumber(a.id) - getNumber(b.id); 
 
    }); 
 
    return input 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body ng-app="myApp" ng-controller="myCrtl"> 
 

 
    <div ng-repeat="game in games | myOrder"> 
 

 
    {{game}} 
 

 
    </div> 
 

 

 
    <body>

來源

2017-07-03 04:29:39

對於大數據，其工作非常緩慢。 .. –

訂單數據NG重複指令內

回答

相關問題