Question

在Angular中，我有多个包含块的列。使用ngRepeat重复列，并重复列内的块。使用Angular-UI和jQueryUI，我使块可以排序并连接所有列。这很好，我可以在列之间拖动块，但只有当我将一个块拖到非空列的末尾时，才会显示最后一个（新的）块。但是，如果在控制台中记录基础数组，则可以看到此数组已更新为blockmove。还会调用其他手表并显示正确的值（如小提琴中所示）

HTML：

<div ng-app="foo" ng-controller="bar">
    <div ng-repeat="column in columns" id="column-{{$index}}" class="column">
        <div class="blocks-wrapper" ui-sortable="columnSortableConfig" ng-model="column.blocks">
            <div ng-repeat="block in column.blocks" class="block" id="block-{{block.id}}">
                {{block.id}}
            </div>
        </div>
    </div>
    {{columns}}
</div>

使用Javascript：

foo = angular.module('foo', ['ui.sortable']);
foo.controller('bar', function($scope){
    $scope.columns = [{blocks: [{id: 1},{id: 2}]},{blocks: [{id: 3}]}];

    $scope.columnSortableConfig = {
        connectWith: '.blocks-wrapper',
        placeholder: 'block-placeholder',
        forcePlaceholderSize: true,
        tolerance: 'pointer',
    };
});

我在网上搜索，使数组中的项非基元（link）并将jQuery的回调包含在范围内。$ apply（）（link）但它都没有不行。

JSFiddle：http://jsfiddle.net/C5pKc/10/ （要重现，请在块2下拖动块3）

Answer 1

您使用的是角度1.2.x吗？如果是这样，请确保使用angular-ui / ui-sortable的angular1.2 branch。这是source file。

问题在this pull request中描述。简而言之，angular使用html注释来跟踪ng-repeat项目。 Jquery不关心评论。因此，当您在列表之间拖动内容时，注释会混乱并且ng-repeat会混淆。希望这有帮助！

在Angular UI connectedsortable中删除了最后一项

1 个答案: