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同时执行这两项操作，则会在start index的{{1}}处添加添加的项目，从而导致项目在其原始索引处重新添加

更多关于array.splice

此外，不要忘记在向下移动项目时考虑splice，您不能再将最后一项移出;）

Answer 2

你也可以尝试一下。它对我来说很好。

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

Answer 3

您不需要使用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;  
    }

angularJs将表项目索引向上或向下移动

3 个答案: