CODEWITHSUNDEEP
angularjsangular-ui-sortable
YHC
YHC

Reputation: 75

orderBy a field from ng-repeat with ui-sortable

I'm using ui-sortable to do drag and drop between 2 array of objects, and I need to sort the object in the array after drag and drop by the name field.

Here is my code in html file:

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

In controller:

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"
      }
   ];

I did some search and found that the similar issue reported in github as https://github.com/angular-ui/ui-sortable/issues/70, however, the Plunker code used orderByFilter which I couldn't locate the source code. Not sure if anyone had similar issue and could point me how to solve this? Thanks.

Upvotes: 1

Views: 671

Answers (1)

tasseKATT
tasseKATT

Reputation: 38490

orderByFilter is part of AngularJS, so you already have access to it.

Just like in the example you found, you can inject it into your controller and use it:

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

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

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

This is equivalent to:

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

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

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

Or just:

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

Injecting orderByFilter directly instead of $filter is just a shortcut.

Upvotes: 0

Related Questions