Angular.js: How do i move up/down a raw from a table in Angular?

Question

I am writing one table in angular. But wanted to implement in such a way that i can move a row up/down if i press up/down button for a particular raw. Is there any feature that i can use ?

     <div class="form-group" ng-show="editMode!=''">
                 <label for="editProdOjects" ng-class="{'col-sm-3':editMode=='addNew'}" class="col-md-2 control-label">Household Criteria</label>
                 <div ng-class="{'col-sm-9':editMode=='addNew'}" class="col-md-10">
                       <table class="table table-bordered table-striped table-hover table-condensed">
                              <thead><th>id</th><th>type</th><th>quantity</th><th>critical</th><th>page count</th><th>paper stock</th><th>outer envelope</th><th></th><th></th><th></th></thead>
                              <tbody>
                                     <tr ng-repeat="track in editProdOjects">
                                             <td>{{track.id}}</td>
                                             <td>{{track.type}}</td>
                                             <td>{{track.quantity}}</td>
                                              <td>{{track.critical}}</td>
                                             <td>{{track.pageCount}}</td>
                                             <td>{{track.paperStock}}</td>
                                             <td>{{track.outerEnvelope}}</td>
                                            <td>
                                                   <button class="btn btn-danger btn-sm" data-style="zoom-in" ng-click="somefunction1()" title="Move Up">
                                                          <span class="glyphicon glyphicon-arrow-up"></span>
                                                   </button>
                                            </td>
                                            <td>
                                                   <button class="btn btn-danger btn-sm" data-style="zoom-in" ng-click="somefunction()" title="Move Down">
                                                          <span class="glyphicon glyphicon-arrow-down"></span>
                                                   </button>
                                            </td>
                                            <td>
                                                   <button class="btn btn-danger btn-sm" data-style="zoom-in" ng-click="editProductbomOjects.splice($index,1)" title="Delete">
                                                          <span class="glyphicon glyphicon-remove"></span>
                                                   </button>
                                            </td>
                                     </tr>
                                     <tr>
                                            <td colspan="10">
                                                   <button class="btn btn-primary btn-sm" ng-click="editProductbomOjects.push({'key':'','value':''})" title="Add Value">
                                                          <span class="glyphicon glyphicon-plus"></span> Add Value
                                                   </button>
                                            </td>
                                     </tr>
                              </tbody>
                       </table>
        </div>

Any help or suggestion?

Answer 1

You can do something like.

<tr ng-keypress="move($event, $index)"> //do not forget to add track by $index in your ng-repeat

</tr>

and then in your controller you can access

$event.keycode

to check if the button pressed was up or down. @Dan has already written the logic to toggle up and down, He missed out the logic to trigger the toggle that is keyUp and keyDown, So it would be sufficient to look at his controller that is:

.controller('someCtrl', function($scope, prodOjectsSerice){

// *COPIED* from @Dan. In order to save time for already defined logic 
  $scope.editProdOjects = prodOjectsSerice.getAll() // just an imagined data fetch

  // move up
  $scope.somefunction1 = function(index){
    if (index === 0) return; // An item at the top can't be moved higher. 

    var temp = $scope.editProdOjects[index - 1];
    $scope.editProdOjects[index - 1] = $scope.editProdOjects[index];
    $scope.editProdOjects[index] = temp;

  }

  // move down
  $scope.somefunction = function(index){
    if (index === $scope.editProdOjects.length - 1) return; // An item at the bottom can't be moved lower. 

    var temp = $scope.editProdOjects[index + 1];
    $scope.editProdOjects[index + 1] = $scope.editProdOjects[index];
    $scope.editProdOjects[index] = temp;

  };

//Trigger to invoke @Dan toggling logic
$scope.move = function(event, index){
     if(event.keycode===38){
          somefunction1(index);
  }
     else if(event.keycode==40){
          somefunction(index);
}





 };

    })