Question

我有一个带有不同排序选项的选择下拉列表，其中一个是罕见的。稀有物是常见的，罕见的，稀有的......等等（然而如预期的那样）当选择稀有物品时，物品按字母顺序排列罕见。有没有办法指定一种不同的排序方式 - 即按固定顺序？

稀有是稀有的，罕见的，罕见的，神话的，传奇的，古老的，不朽的，奥秘（来自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];
};

Answer 1

您可以提供映射功能。

在您的HTML中：

"items | orderBy: rarityOrder"

在您的控制器中：

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

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

Answer 2

<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>

可能上面的代码可以帮到你!!

您可以修改自己以包含＆＃39;谓词＆＃39;这应该工作我猜。

使用orderBy进行AngularJS自定义排序

2 个答案: