Angular.js: How can I move up / down from a table in Angular?

Question

I am writing a single table in angular. But I wanted to implement it so that I could move the line up / down if I press the up / down button for a certain raw material. Is there a function 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 has been pressed up or down. @Dan already wrote the logic for switching up and down, he skipped the logic to trigger the switch, which is keyUp and keyDown, so just look at his controller, which:

 .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); } }; }) 

Answer 2

That should work. I interpreted this as

 +++++++++++++++++ 0th row (up)(down) +++++++++++++++++ 1st row (up)(down) // clicking up makes me in 0th position. +++++++++++++++++ and the 0th position in mine. Clicking down 2nd row (up)(down) makes me the 2nd position, and 2nd position in mine. +++++++++++++++++ 

Here is the code

 .controller('someCtrl', function($scope, prodOjectsSerice){ $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; } }) 

Then just modify your ng-click calls to include $index - somefunction1($index) , which passes the current index of the row in the array.