Question

我有一个列表，当我点击按钮时，值会按预期移动。但是，当我单击提交按钮时，所选的 id 不会附加到数据库。我试着做同样的例子并制作了一些R＆amp; D.但我没有得到预期的结果。我不知道出了什么问题。任何逻辑/建议都非常感激。

Angularjs：

var app = angular.module('myApp', []);
app.controller('Controller', function ($scope) {
$scope.moveUp = function () {
        for(var i = 0; i < $scope.vehicle.length; i++) {
            var idx = $scope.peoples.indexOf($scope.vehicle[i])
            console.log(idx);
            if (idx > 0) {
                var itemToMove = $scope.cars.splice(idx, 1)
                console.log(itemToMove[0])
                $scope.cars.splice(idx-1, 0, itemToMove[0]);

            }
        }
    };

   $scope.moveDown = function () {
       var revVeh = $scope.vehicle.concat();
       revVeh.reverse();
        for(var i = 0; i < revVeh.length; i++) {
            var idx = $scope.cars.indexOf(revVeh[i])
            console.log(idx);
            if (idx < $scope.cars.length) {
                var itemToMove = $scope.cars.splice(idx, 1)
                console.log(itemToMove[0])
                $scope.cars.splice(idx+1, 0, itemToMove[0]);

            }
        }
    };    
});

这是我的plnkr示例（https://plnkr.co/edit/uyg99UO2Hm31AlLSBRAg）

Answer 1

我为你的问题答案创建了这个plunker

https://plnkr.co/edit/g49UoXTyAohVveNcw5eS?p=preview

或代码

HTML CODE：

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="angular.js@1.4.9" data-semver="1.4.9" src="https://code.angularjs.org/1.4.12/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="main">
    <options-up-down-directive option-to-process-up-down-of-keys="optionData" 
    option-to-select="dataToSelect1" class="col-5">
    </options-up-down-directive>
  </body>

</html>

JAVASCRIPT CODE：

var app = angular.module('app', []);

app.controller('main', function($scope){
   $scope.optionData = ['abc', 'xyz', 'TDS'];
   $scope.dataToSelect1 = {};
});

app.directive('optionsUpDownDirective',optionsUpDownDirective);

function optionsUpDownDirective() {

    var directiveController = function($scope) {

        var selfController = this;
        var optionToProcessUpDownOfKeys = [];
        var itemToMove = null;
        $scope.optionToSelect.selectedData = null;

        $scope.keyToMoveUpAndDown = $scope.optionToProcessUpDownOfKeys[0];

        selfController.moveKeyUpAndDown = function(mode) {
            optionToProcessUpDownOfKeys = $scope.optionToProcessUpDownOfKeys;
            for(var i = 0, keysLength = $scope.optionToProcessUpDownOfKeys.length; i < keysLength; i++) {
                if(optionToProcessUpDownOfKeys[i] == $scope.keyToMoveUpAndDown) {
                    var index = i;
                    console.log($scope.optionToSelect);
                    if ( index > 0  && mode === 'up') {
                        $scope.optionToSelect.selectedData = optionToProcessUpDownOfKeys.splice(index, 1);
                        $scope.optionToProcessUpDownOfKeys.splice(index-1, 0, $scope.optionToSelect.selectedData[0]);
                    } else if(mode === 'down'){
                        $scope.optionToSelect.selectedData = optionToProcessUpDownOfKeys.splice(index, 1);
                        $scope.optionToProcessUpDownOfKeys.splice(index+1, 0, $scope.optionToSelect.selectedData[0]);
                    }
                    break;
                }
            }
        };


    };


    return {
        restrict : 'E',
        scope : {
            optionToProcessUpDownOfKeys : "=?optionToProcessUpDownOfKeys",
            optionToSelect: "=?optionToSelect"
        },
        template :`<select id="select" size="7" ng-model="keyToMoveUpAndDown" ng-options="key for key in optionToProcessUpDownOfKeys" ng-click="keyToChangeCtrl.enableUpOrDownButton(keyToMoveUpAndDown)">
        </select>
        <button ng-click="keyToChangeCtrl.moveKeyUpAndDown('up')" class="local-action-button" id="moveUp">
        <i class="glyphicon glyphicon-arrow-up button-glyphicon-label-dis"></i>UP</button>
    <button ng-click="keyToChangeCtrl.moveKeyUpAndDown('down')" class="local-action-button" id="moveDown">
        <i class="glyphicon glyphicon-arrow-down button-glyphicon-label-dis"></i>DOWN</button>
    </div>`,
    controller : ['$scope', directiveController],
        controllerAs : "keyToChangeCtrl"
    };
}

使用按钮的角度拖放元素

1 个答案: