Question

我正在用角度写一张桌子。但是想要以这样一种方式实现，即如果我按下特定原始按钮的向上/向下按钮，我可以向上/向下移动一行。我可以使用任何功能吗？

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

任何帮助或建议？

Answer 1

你可以做点什么。

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

</tr>

然后在你的控制器中你可以访问

$event.keycode

检查按下的按钮是上升还是下降。 @Dan已经编写了逻辑来上下切换，他错过了触发keyUp和keyDown切换的逻辑，所以看看他的控制器就足够了：

.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

这应该有效。我把它解释为

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

这是代码

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

  }

})

然后只需将您的ng-click调用更改为包含$index - somefunction1($index)，它会传递数组中的当前行索引。

Angular.js：我如何从Angular中的表中向上/向下移动原始？

2 个答案: