Angular.js: Wie gehe ich in Angular von einem Tisch rauf/runter?

Question

Ich schreibe einen Tisch in eckigen. Aber wollte so implementieren, dass ich eine Zeile nach oben/unten bewegen kann, wenn ich auf/ab-Taste für eine bestimmte rohe drücken. Gibt es eine Funktion, die ich verwenden kann?

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

Jede Hilfe oder Anregung?

Answer 1

Dies sollte funktionieren. Ich interpretierte das als

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

den Code hier

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

    } 

}) 

dann Ihre ng-click Anrufe nur ändern $index aufzunehmen - somefunction1($index), die den aktuellen Zeilenindex im Array übergibt.

Answer 2

Sie können etwas wie tun.

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

</tr> 

und dann in Ihrem Controller können Sie

zugreifen

$event.keycode

zu überprüfen, ob die Taste gedrückt wurde nach oben oder unten. @ Dan hat bereits die Logik geschrieben umschalten nach oben und unten, verpasste er die Logik aus den Knebel auszulösen, die keyUp und keyDown ist, also es würde ausreichen, um an seinem Controller zu suchen, ist:

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





}; 

    })