Question

我正在使用Angular和jQuery UI创建列表编辑器。目标是添加/编辑/删除/排序项目。

这是我的HTML代码，用于显示列表。

<ul id="sortable" >
    <li ng-repeat="cat in admin.catalogues">
        <label for="title">Title</label>
        <input type="text" name="title" ng-model="cat.title" />                    
        <label for="image">Image</label><input type="text" name="image" ng-model="cat.image" istype="image" />
        <button ng-click="admin.removeCatalogue(cat)">Remove</button>
    </li>
</ul>

然后我有这些Angular方法（我刚刚复制了应该有用的东西）。

this.catalogues = [];

this.addCatalogue = function () {
    var newcat = {
        title: "",
        image: "",
        pdf: ""
    };
    this.catalogues.push(newcat);
};

this.removeCatalogue = function (item) {
    this.catalogues.splice(this.catalogues.indexOf(item), 1);
};

this.sort = function(fromIndex, toIndex){
    var element = this.catalogues[fromIndex];
    this.catalogues.splice(fromIndex, 1);
    this.catalogues.splice(toIndex, 0, element);
 };

最后这个可排序部分的jQuery脚本 - 它使用jQuery UI工作，我调用Angular控制器来更新列表。我可能在Stackoverflow上找到了这个代码片段。

$(document).ready(function(){
    startIndex = -1;
    newIndex = -1;
    $('#sortable').sortable({
        placeholder:'placeholder',
        start: function (event, ui) {
            startIndex = ($(ui.item).index());
        },
        stop: function(event, ui){
            newIndex = ($(ui.item).index());
            angular.element(document.getElementById('content')).controller().sort(startIndex, newIndex);
        }
    });
});

添加项目，删除和排序都正常。但排序后，列表变得疯狂。在列表中或多或少地随机添加新项目，并且删除按钮有时会删除多个项目。

我创建了一个小提琴进行测试：https://jsfiddle.net/Neow85/jbg8kdv4/

感谢您的帮助！

排序后我的列表变得疯狂

0 个答案: