angularJs向上或向下移動表項目索引

Question

我有一個表格，我想通過向上或向下移動項目來更改順序或行。具有索引3的元素選擇（T17180054）應該向上移動並具有新的索引2並且最好保留選擇。

這是我的HTML：

<table st-safe-src="flow3.dataSet" st-table="flow3.displayed" class="table table-striped"> 
    <thead> 
     <tr> 
      <th st-sort="method">Method</th> 
      <th st-sort="sample">Sample</th> 
      <th st-sort="parameters">Parameters</th> 
     </tr> 
    </thead> 
    <tbody ui-sortable ng-model="flow3.displayed"> 
     <tr ng-repeat="row in flow3.displayed track by $index" style="cursor: move;" 
      ng-click="row.selected = !row.selected; flow3.selectRow($event, row, index)" 
      ng-class="{success: row.selected}">> 
      <td>{{row.method.name}}</td> 
      <td>{{row.sample}}</td> 
      <td> 
       <span ng-repeat="parameter in row.parameters"> 
        {{parameter.methodInputParameter.name}} : {{parameter.value}}<br/></span> 
      </td> 
      <td> 
       <button type="button" ng-click="flow3.removeItem(row)" 
        class="btn btn-danger btn-sm btn-round pull-right" 
        ng-disabled="flow3.confirmDisabled"> 
         <i class="glyphicon glyphicon-trash"></i> 
       </button> 
      </td> 
     </tr> 
    </tbody> 
</table> 

這是我的兩個向上和向下按鈕

<div class="row"> 
    <div class="col-xs-6"> 
     <div class="btn btn-info btn-lg btn-full-width"> 
      <span class="glyphicon glyphicon-menu-up" ng-click="flow3.moveItemUp();"></span> Up 
     </div> 
    </div> 
    <div class="col-xs-6"> 
     <div class="btn btn-info btn-lg btn-full-width"> 
      <span class="glyphicon glyphicon-menu-down" ng-click="flow3.moveItemDown();"></span> Down 
     </div> 
    </div> 
</div> 

這是我的JS： 我曾嘗試使用拼接方法由於我每次都有錯誤的結果。 有更好的選擇嗎？

flow3.moveItemDown = function moveItemDown() { 
    var index = flow3.dataSet.indexOf(flow3.selectedItem); 

    if(index == 0) { 
     return; 
    } else { 
     flow3.dataSet.splice(?, ?, ? , ?) 
    } 
} 

Answer 1

您可以使用splice，但你需要使用它兩次：一次是從老位置刪除該項目，一旦該項目重新加入到新的位置：

flow3.moveItemDown = function moveItemDown() { 
    var index = flow3.dataSet.indexOf(flow3.selectedItem); 

    if(index <= 0) { 
     // The item cannot be moved up if it's already the first in the array; 
     // and account for -1, index not found 
     return; 
    } else { 
     // Remove value to replace 
     var removed = flow3.dataSet.splice(index, 1); 
     // Re-add removed value to the previous index 
     flow3.dataSet.splice(index - 1, 0, removed[0]); 
    } 
} 

如果您嘗試使用相同的splice來執行這兩項操作，則會在splice的start index處添加添加的項目，從而導致該項目在其原始索引處重新添加。

更多array.splice

而且，不要忘了佔array length移動時的物品了，你不能移動的最後一個項目下來了;）

Answer 2

您不需要使用splice()。你可以使用array swapping邏輯

只是使用這個作爲關鍵的答案，我不知道它是完全正確的與您的代碼:)。我希望這個邏輯將解決您的問題

//TopToBottom 
flow3.moveItemDown = function moveItemDown() 
    { 
      var fromIndex = flow3.displayed.indexOf(flow3.selectedItem); 
      if (fromIndex + 1 > flow3.displayed.length) { 
       return false 
      } 
      var toindexObject = flow3.displayed[fromIndex + 1] 
      flow3.displayed[fromIndex + 1] = flow3.selectedItem; 
      flow3.displayed[fromIndex] = toindexObject; 
    } 

//BottomToTop 
flow3.moveItemUp = function moveItemUp() { 
      var fromIndex = flow3.displayed.indexOf(flow3.selectedItem); 
      if (fromIndex - 1 < flow3.displayed.length) { 
       return false 
      } 
      var toindexObject = flow3.displayed[fromIndex - 1] 
      flow3.displayed[fromIndex - 1] = flow3.selectedItem; 
      flow3.displayed[fromIndex] = toindexObject; 
    } 

Answer 3

你也可以試試這個。它爲我工作很好。

// Move list items up or down or swap 
    $scope.moveItem = function (origin, destination) { 
     var temp = $scope.list[destination]; 
     $scope.list[destination] = $scope.list[origin]; 
     $scope.list[origin] = temp; 
    }; 

    // Move list item Up 
    $scope.listItemUp = function (itemIndex) { 
     $scope.moveItem(itemIndex, itemIndex - 1); 
    }; 

    // Move list item Down 
    $scope.listItemDown = function (itemIndex) { 
     $scope.moveItem(itemIndex, itemIndex + 1); 
    };