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

Question

我从以下链接中找到了 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]);
        };

    }
 }
});

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

Answer 1

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

在 Controller 中添加一个函数

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