使用angularJS禁用表中行向上/向下移动的第一列

时间:2017-07-27 08:16:52

标签: javascript html css angularjs

我卡住了,不知道我错过了什么。

我能够在表格中向上/向下移动一行,但我需要的是,第一列单元格值应该保持不变。以下是我的代码。

我的HTML文件:

<div ng-show="showStoppageTable" align="center" class="form-group-sm">
    <table id="stoppageTable" class="table table-striped table-hover table-bordered table-xs ">
        <thead>
            <tr>
                <th class="btn-info">serialNo</th>
                <th class="btn-info">Stoppage Name</th>
                <th class="btn-info">Description</th>
                <th class="btn-info">Route order</th>
                <th class="btn-info">Action</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="stoppage in StoppageData">
                <td>{{ stoppage.orderId }}</td>
                <td>{{ stoppage.stoppageName }}</td>
                <td>{{ stoppage.description }}</td>
                <td>
                    <div class="floating-buttons" align="center">
                        <button type="button" name="moveUpButton" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#moveUpModal" ng-click="r.ForMoveUp($index)" data-toggle="tooltip" data-placement="bottom" title="MoveUP"><i class="glyphicon glyphicon-triangle-top"></i></button>
                        <button type="button" name="moveDownButton" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#moveDownModal" ng-click="r.ForMoveDown($index)" data-toggle="tooltip" data-placement="top" title="MoveDown"><i class="glyphicon glyphicon-triangle-bottom"></i></button>
                    </div>
                </td>
                <td>
                    <div class="floating-buttons" align="center">
                        <button type="button" name="deleteStoppage" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#deleteStoppage" ng-click="r.deleteStoppage(stoppage,$index)" data-toggle="tooltip" data-placement="bottom" title="DeleteStoppage"><i class="glyphicon glyphicon-trash"></i></button>                                      
                    </div> 
                </td> 
            </tr>
        </tbody> 
    </table>

我的ctrl.js文件:

vm.ForMoveUp = function (rowIndex) {
    var StoppageData = $scope.StoppageData;
    if (rowIndex > 0) {
        var temp = StoppageData[rowIndex - 1];
        StoppageData[rowIndex - 1] = StoppageData[rowIndex];
        StoppageData[rowIndex] = temp;
        $scope.rowIndex--;
    }
}

vm.ForMoveDown = function (rowIndex) {
    var StoppageData = $scope.StoppageData;
    if (rowIndex < StoppageData.length - 1) {
        var temp = StoppageData[rowIndex + 1];
        StoppageData[rowIndex + 1] = StoppageData[rowIndex];
        StoppageData[rowIndex] = temp;   }      
}

1 个答案:

答案 0 :(得分:0)

我想你正在寻找这样的东西: 点击向上/向下,stoppageNamedescription应移动,但orderId应保持不变。

    vm.ForMoveUp = function(rowIndex) {
       var StoppageData = $scope.StoppageData;
       if (rowIndex > 0) {
           var temp = StoppageData[rowIndex - 1];
           StoppageData[rowIndex - 1].stoppageName = StoppageData[rowIndex].stoppageName;
           StoppageData[rowIndex - 1].description = StoppageData[rowIndex].description;
           StoppageData[rowIndex].stoppageName = temp.stoppageName;
           StoppageData[rowIndex].description = temp.description;
           $scope.rowIndex--;
       }
   }

   vm.ForMoveDown = function(rowIndex) {
       var StoppageData = $scope.StoppageData;
       if (rowIndex < StoppageData.length - 1) {
           var temp = StoppageData[rowIndex + 1];
           StoppageData[rowIndex + 1].stoppageName = StoppageData[rowIndex].stoppageName;
           StoppageData[rowIndex + 1].description = StoppageData[rowIndex].description;
           StoppageData[rowIndex].stoppageName = temp.stoppageName;
           StoppageData[rowIndex].description = temp.description;
       }
   }

让我知道这是否适合您,或者您有其他要求