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自定义订单订购通过

回答

相关问题