AngularJS自定義訂單訂購通過

我有一個選擇下拉列表與不同的排序選項，其中之一是罕見的。稀有品種是罕見的，罕見的......等等（如預期的那樣），當選擇稀有品種時，按照字母順序排列稀有品種。有沒有一種方法可以指定一種不同的方式來訂購稀有品 - 即按照固定順序？AngularJS自定義訂單訂購通過

的稀有很常見，少見，少見，神話，傳說，古老的，不朽的，奧祕（從DOTA2的情況下，你想知道。）

因此，舉例來說，而不是稀有的字母順序這是默認情況下，我希望按照上面顯示的順序。

下面是我已經試過：

<select class="form-control" id="select-sorting" ng-model="orderProp"> 
     <option value="">No Sorting</option> 
     <option value="used_by_heroes">Hero</option> 
     <option value="class">Type</option> 
     <option value="rarityOrder">Rarity</option> 
</select> 
... 
<div ng-repeat="item in items" ... orderBy:orderProp> 
    ... 
</div>

而且指令中：

var mapping = { 
       'common': 0, 
       'uncommon': 1, 
       'rare': 2, 
       ... 
}; 
scope.rarityOrder = function(item) { 
    return mapping[item.item_rarity]; 
};

來源

2014-08-27 Titus

例子？固定訂單是什麼意思？ – 2014-08-27 12:36:26

增加了一點清晰度。 – Titus 2014-08-27 12:39:43

@zeroflagL仍然不起作用:(。我仍然想知道如何知道引用屬性'item_rarity' - 雖然我想知道是否允許你有一個函數作爲選項嗎？ – Titus 2014-08-27 13:17:03

您可以提供一個映射功能。

在HTML：

"items | orderBy: rarityOrder"

在你的控制器：

var mapping = { 
    'rare': 0, 
    'uncommon': 1 
    ... 
}; 

$scope.rarityOrder = function(rarity) { 
    return mapping[rarity]; 
}

來源

2014-08-27 12:41:35 zeroflagL

似乎無法爲我工作。只是對如何將參數傳遞給此函數有點困惑？ – Titus 2014-08-27 13:00:55

@Titus該參數由'orderBy'過濾器傳遞。你只是告訴它使用什麼函數。 – zeroflagL 2014-08-27 13:07:20

-1

<script> 
    angular.module('orderByExample', []) 
    .controller('ExampleController', ['$scope', function($scope) { 
     $scope.friends = 
      [{name:'John', phone:'555-1212', age:10}, 
      {name:'Mary', phone:'555-9876', age:19}, 
      {name:'Mike', phone:'555-4321', age:21}, 
      {name:'Adam', phone:'555-5678', age:35}, 
      {name:'Julie', phone:'555-8765', age:29}]; 
     $scope.predicate = '-age'; 
    }]); 
</script> 
<div ng-controller="ExampleController"> 
    <pre>Sorting predicate = {{predicate}}; reverse = {{reverse}}</pre> 
    <hr/> 
    [ <a href="" ng-click="predicate=''">unsorted</a> ] 
    <table class="friend"> 
    <tr> 
     <th><a href="" ng-click="predicate = 'name'; reverse=false">Name</a> 
      (<a href="" ng-click="predicate = '-name'; reverse=false">^</a>)</th> 
     <th><a href="" ng-click="predicate = 'phone'; reverse=!reverse">Phone Number</a></th> 
     <th><a href="" ng-click="predicate = 'age'; reverse=!reverse">Age</a></th> 
    </tr> 
    <tr ng-repeat="friend in friends | orderBy:predicate:reverse"> 
     <td>{{friend.name}}</td> 
     <td>{{friend.phone}}</td> 
     <td>{{friend.age}}</td> 
    </tr> 
    </table> 
</div>

可能是上面的代碼可以幫助你！

你可以修改你的包含'謂詞'，這應該工作我猜。

來源

2014-08-27 13:06:55

AngularJS自定義訂單訂購通過

回答

相關問題