Angularjs-UI 可排序的多个 div 列表答案

【问题标题】：Angularjs-UI sortable multiple div listAngularjs-UI 可排序的多个 div 列表
【发布时间】：2014-07-24 23:03:53
【问题描述】：

我正在尝试排序工作。

 <ul ui-sortable='data.sortableOptions' ng-model="dp.claims" class="list-unstyled">
        <li ng-repeat="c in dp.claims">
            <div> {{c.field1}} </div>
            <div> {{c.field2}} </div>
            <div> {{c.field3}} </div>
        </li>
 </ul>

我似乎无法抓住和拖动任何东西。这个问题的重要部分是 li 中的 3 个 div

我承认，我不明白文档中的这一行是什么意思：“ui-sortable element 应该只包含一个 ng-repeat 而不能包含任何其他元素（上方或下方）。”

而且我可以让它在一张桌子上工作。

有什么见解吗？

【问题讨论】：

codepen.io/thgreasi/pen/KtsFH
不确定你在告诉我什么。我知道我可以得到
- {{c .field1}}
工作。
这是完整的工作示例，您可以比较您的代码
谢谢，但不是解决问题的例子
你想在<div> {{c.field1}} </div> <div> {{c.field2}} </div> <div> {{c.field3}} </div>之间排序吗？？请为您的代码创建一个小提琴！

标签： javascript jquery angularjs jquery-ui

【解决方案1】：

是的，文档确实说“ui-sortable 元素应该只包含一个 ng-repeat 而不能包含任何其他元素（上面或下面）。”这使得在 li 中很难有 3 个 div。但是，有一个解决方案。

您可以使用 tg-dynamic-directive (https://github.com/thgreasi/tg-dynamic-directive) 来解决这个问题。不要忘记包含它，并将 'tg.dynamicDirective' 放入您的依赖项中。基本上，您取出 li 标签之间的中间部分，在本例中为 3 个 div，然后将其放入另一个文件并链接到它。

 <ul ui-sortable='data.sortableOptions' ng-model="dp.claims" class="list-unstyled">
        <li ng-repeat="c in dp.claims">

        </li>
 </ul>

然后在另一个文件中放入内脏，比如 innards.html:

        <div> {{c.field1}} </div>
        <div> {{c.field2}} </div>
        <div> {{c.field3}} </div>

并将内脏替换为：

<ul ui-sortable='data.sortableOptions' ng-model="dp.claims" class="list-unstyled">
        <li ng-repeat="c in dp.claims">
           <tg-dynamic-directive ng-model="c" tg-dynamic-directive-view="getView">
           </tg-dynamic-directive>
        </li>
 </ul>

然后在你的控制器中放一些类似的东西：

 $scope.getView = function(item) {
  if item {
    return 'innards.html';
  return null;
 };

无论如何，文档都很好地介绍了它。我意识到这个问题已经很老了，但我自己遇到了这个问题并让它工作，所以希望它可以帮助别人。

【讨论】：