Angular.js: Açısaldaki bir tablodaki bir ham maddeyi yukarı/aşağı nasıl hareket ettiririm?

Question

Bir tablo açısal olarak yazıyorum. Ancak, belirli bir ham için yukarı/aşağı düğmesine bastığımda bir satırı yukarı/aşağı taşıyabileceğim bir şekilde uygulamak istedim. Kullanabileceğim özellik var mı?

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

Herhangi bir yardım veya öneri?

Answer 1

Çalışması gerekir. dizideki mevcut satır dizini geçer somefunction1($index) - Ben

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

Burada Sonra kod

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

    } 

}) 

var tıpkı $index içerecek şekilde ng-click aramaları değiştirmek yorumlanır.

Answer 2

Böyle bir şey yapabilirsiniz.

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

</tr> 

ve düğmeye basıldığında eğer daha sonra denetleyicisi size

$event.keycode

kontrol etmek erişebilir yukarı veya aşağı oldu. @Dan zaten geçiş yapmak için mantığı yazmış ve aşağı, O keyUp ve keyDown olduğu toggle tetiklemek için mantık kaçırmış, Bu yüzden olduğu şeklindeki denetleyici bakmak yeterli olacaktır:

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





}; 

    })