Question

我在以下链接中找到了angularjs中可拖动标签的漂亮解决方案 {{3}}

我在我的页面中实现了它。但是在刷新页面时，它会回滚到之前的状态。因此，我计划保存或更新数据库中选项卡的索引值或重新排序级别，以便在刷新页面时我可以正确地安排它。我的问题是如何获得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]);
        };

    }
 }
});

点击保存更改按钮后，我想在＆＃39; order＆＃39;中获取tabindex的更改值。标签数组。有希望吗？

Answer 1

这个答案对我有用。在选项卡数据中添加索引值并按索引值显示选项卡顺序。然后在指令中的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);
 };

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

1 个答案: