orderBy 来自 ng-repeat 和 ui-sortable 的字段答案

【问题标题】：orderBy a field from ng-repeat with ui-sortableorderBy 来自 ng-repeat 和 ui-sortable 的字段
【发布时间】：2017-01-24 03:19:42
【问题描述】：

我正在使用 ui-sortable 在 2 个对象数组之间进行拖放，并且我需要在拖放后按名称字段对数组中的对象进行排序。

这是我在 html 文件中的代码：

<body ng-controller="listCtrl">
  <ul ui-sortable="playerConfig" ng-model="players">
    <li ng-repeat="player in players">
      <!--| orderBy: ['name']-->
      {{player.name}}
    </li>
  </ul>
</body>

 <style type="text/css">
     .beingDragged {
    height: 24px;
    margin-bottom: .5em !important;
    border: 2px dotted #ccc !important;
    background: none !important;
 }
 </style>

在控制器中：

angular.module('app', [
    'ui.sortable'
]).

controller('listCtrl', function ($scope) {

  var baseConfig = {
      placeholder: "beingDragged"
  };

  $scope.playerConfig = angular.extend({}, baseConfig, {
      connectWith: ".players"
  });

  $scope.players = [
      { 
        "name" : "John",
        "id" : "123",
        "score": "456"
      },
      { 
        "name" : "Tom",
        "id" : "234",
        "score": "678"
      },
      { 
        "name" : "David",
        "id" : "987",
        "score": "5867"
      }
   ];

我做了一些搜索，发现 github 中报告的类似问题为 https://github.com/angular-ui/ui-sortable/issues/70 但是，Plunker 代码使用了 orderByFilter，我找不到源代码。不知道是否有人有类似的问题，可以指出我如何解决这个问题？谢谢。

【问题讨论】：

标签： angularjs angular-ui-sortable

【解决方案1】：

orderByFilter 是 AngularJS 的一部分，所以你已经可以访问它了。

就像您找到的示例一样，您可以将其注入您的控制器并使用它：

app.controller('MyController', function ($scope, orderByFilter) {

  $scope.players = [{ name: 'Eve'}, { name: 'Adam'}];

  $scope.sorted = orderByFilter($scope.players, 'name');
});

这相当于：

app.controller('MyController', function ($scope, $filter) {

  $scope.players = [{ name: 'Eve'}, { name: 'Adam'}];

  var orderByFilter = $filter('orderBy');
  $scope.sorted = orderByFilter($scope.players, 'name');
});

或者只是：

$scope.sorted = $filter('orderBy')($scope.players, 'name');

直接注入orderByFilter而不是$filter只是一个捷径。

【讨论】：

太好了，我刚刚试了一下，效果很好。我是 AngularJS 新手，非常感谢您的帮助。