Question

作为How do I move from one ui-sortable to another in Angular?

的后续行动

如果我有2个连接列表，其中一个列表为空，我该如何实际删除它？再次查看http://minitrello.meteor.com他即使在空列表中也创建了一个占位符。我如何复制，以便

时

list1 = []; list2 = ['A','B','C']

我实际上可以放到list1？在http://jsfiddle.net/hKYWr/894/

处小提琴

编辑：http://jsfiddle.net/hKYWr/897/

的清洁小提琴

Answer 1

如果您的列表为空，那么您还需要创建一个空Li

我在每个列表中添加了一个列表

<li ng-show="list1.length==0">&nbsp;</li>

<li ng-show="list2.length==0">&nbsp;</li>

以下是工作演示

Demo

模板代码：

<div ng:controller="controller">
    <div style="float:left; margin:5px;">
        <h3>list1</h3>
    <ul ui:sortable="sortableOptions" class="connectedList" ng:model="list1">
        <li ng:repeat="item in list1" class="item">{{item}}</li>
        <li ng-show="list1.length==0">&nbsp;</li>
    </ul>
    </div>
    <div style="float:left;margin:5px;">
    <h3>list2<h3>
    <ul ui:sortable="sortableOptions" class="connectedList" ng:model="list2">
        <li ng:repeat="item in list2" class="item">{{item}}</li>
         <li ng-show="list2.length==0">&nbsp;</li>
    </ul>
    </div>
        <div style="clear:both;"></div>
    <hr />
    <div>list1: {{list1 | json}}</div>
    <div>list2: {{list2 | json}}</div>
</div>

Answer 2

对于已接受的答案，这是一个类似的'hacky'解决方案，但您也可以在列表中添加一些填充（顶部/底部）来处理此问题。

e.g。

<ul style="padding-top:20px; padding-bottom: 20px;">

请参阅小提琴here获取证据！

这表明问题是空列表没有提供“目标”。

设置最小高度也同样有效。

Answer 3

我使用的解决方案只是将min-height设置为连接列表

.connectedList {
  min-height: 10px
}

http://jsfiddle.net/hKYWr/2367/

如何使用angular-ui拖动到空的连接列表？

3 个答案: