javascript - 如何使用HTML5获取angularjs中可拖动选项卡的索引值

我从以下链接中找到了angularjs中可拖动选项卡的漂亮解决方案
Angular tabs - sortable/moveable

我在页面中实现了它。但是在刷新页面时，它会回滚到以前的状态。因此，我计划保存或更新数据库中选项卡的索引值或重新排序级别，以便在刷新页面时可以正确地安排它。我的问题是如何在ng-model或ng-repeat中使用的数组变量中获取更改的值。我将在下面提供我的代码

<uib-tabset justified="false" active="dashboardTab.active">
            <uib-tab sortable-tab index="$index" ng-repeat="tab in tabs| orderBy : 'order'" disable="tab.disabled" >
                <uib-tab-heading style="cursor:pointer">
                    <span>{{tab.Name}}</span>
                </uib-tab-heading>
            </uib-tab>
        </uib-tabset>
 <button class="btn btn-primary btn-sm" ng-click="saveTabs()" >Save Changes</button>

指令是

app.directive('sortableTab', function ($timeout, $document) {
return {
    link: function (scope, element, attrs, controller) {
        // Attempt to integrate with ngRepeat
        var match = attrs.ngRepeat.match(/^\s*([\s\S]+?)\s+in\s+([\s\S]+?)(?:\s+track\s+by\s+([\s\S]+?))?\s*$/);
        var tabs;
        scope.$watch(match[2], function (newTabs) {
            tabs = newTabs;
        });

        var index = scope.$index;
        scope.$watch('$index', function (newIndex) {
            index = newIndex;
        });

        attrs.$set('draggable', true);

        // Wrapped in $apply so Angular reacts to changes
        var wrappedListeners = {
            // On item being dragged
            dragstart: function (e) {
                console.log(e.originalEvent.dataTransfer);
                e.originalEvent.dataTransfer.effectAllowed = 'move';
                e.originalEvent.dataTransfer.dropEffect = 'move';
                e.originalEvent.dataTransfer.setData('application/json', index);
                element.addClass('dragging');
            },
            dragend: function (e) {
                //e.stopPropagation();
                element.removeClass('dragging');
            },

            // On item being dragged over / dropped onto
            dragenter: function (e) {
            },
            dragleave: function (e) {
                element.removeClass('hover');
            },
            drop: function (e) {
                e.preventDefault();
                e.stopPropagation();
                var sourceIndex = e.originalEvent.dataTransfer.getData('application/json');
                move(sourceIndex, index);
                element.removeClass('hover');
            }
        };

        // For performance purposes, do not
        // call $apply for these
        var unwrappedListeners = {
            dragover: function (e) {
                e.preventDefault();
                element.addClass('hover');
            },
            /* Use .hover instead of :hover. :hover doesn't play well with
               moving DOM from under mouse when hovered */
            mouseenter: function () {
                element.addClass('hover');
            },
            mouseleave: function () {
                element.removeClass('hover');
            }
        };

        angular.forEach(wrappedListeners, function (listener, event) {
            element.on(event, wrap(listener));
        });

        angular.forEach(unwrappedListeners, function (listener, event) {
            element.on(event, listener);
        });

        function wrap(fn) {
            return function (e) {
                scope.$apply(function () {
                    fn(e);
                });
            };
        }

        function move(fromIndex, toIndex) {
            tabs.splice(toIndex, 0, tabs.splice(fromIndex, 1)[0]);
        };

    }
 }
});

单击保存更改按钮时，我想以tabs数组的“顺序”获取tabindex的更改值。有希望吗

最佳答案

这个答案对我有用。在标签数据中添加索引值，并按该索引值显示标签顺序。然后在指令的move（）函数中添加新的索引值，如下所示。

在控制器中添加功能

app.controller('ctrlname', function ($scope) {
  $scope.data = [];
  $scope.data.tabs = [
   { title:'Dynamic Title 1', content:'Dynamic content 1', active:true, indexValue:1},
   { title:'Dynamic Title 2', content:'Dynamic content 2',indexValue: 2},
   { title:'Dynamic Title 3', content:'Dynamic content 3', indexValue: 3}
  ];
  $scope.saveDraggedTab = function(tabs){
     console.log(tabs);
     //do the logic here
  }
});

在指令中，在move（）中添加以下代码

function move(fromIndex, toIndex) {
        tabs.splice(toIndex, 0, tabs.splice(fromIndex, 1)[0]);
        var counter = 1;
        angular.forEach(tabs, function (item, key) {
        item.indexValue = counter;
        counter++;
     });
     scope.saveDraggedTab(tabs);
 };

关于javascript - 如何使用HTML5获取angularjs中可拖动选项卡的索引值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48376425/