Angular.js: Come posso spostare su/giù un raw da una tabella in Angular?

Question

Sto scrivendo una tabella angolare. Ma volevo implementarlo in modo tale da poter spostare una riga su/giù se premo il pulsante su/giù per un particolare raw. C'è qualche funzione che posso usare?

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

Qualsiasi aiuto o suggerimento?

Answer 1

Questo dovrebbe funzionare. Ho interpretato che come

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

Ecco il codice

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

    } 

}) 

Poi basta modificare le ng-click chiamate per includere $index-somefunction1($index) che passa l'indice di riga corrente nella matrice.

Answer 2

Si può fare qualcosa di simile.

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

</tr> 

e poi nel controllore è possibile accedere

$event.keycode

per verificare se il tasto premuto è stato alto o in basso. @ Dan ha già scritto la logica per passare su e giù, ha mancato la logica per far scattare l'interruttore che è keyUp e keyDown, Quindi sarebbe sufficiente guardare il suo controller che è:

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





}; 

    })