Угловое перетаскивание элемента с помощью кнопки - PullRequest
Новая
       4

Угловое перетаскивание элемента с помощью кнопки

0 голосов
/ 01 июня 2018

У меня есть список, и когда я нажимаю на кнопку, значения перемещаются, как ожидалось.Но когда я нажимаю кнопку отправки, выбранные идентификаторы не добавляются в базу данных.Я попытался сделать тот же пример и сделал некоторые исследования и разработки.Но я не получил ожидаемых результатов.Я не знаю что не так.Любая логика / совет с благодарностью.

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)

1 Ответ

0 голосов
/ 01 июня 2018

Я создал этот плункер для ответа на ваш вопрос

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

или КОД

КОД HTML: 

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

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"
    };
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...