在没有 ng-repeat 的情况下使用 ng-sortable

Question

我有这个使用 ng-sortable 的工作示例；

HTML

<ul as-sortable="vm.sortableOptions" ng-model="vm.items">
    <li ng-repeat="item in vm.items" as-sortable-item class="as-sortable-item">
        <div as-sortable-item-handle class="as-sortable-item-handle" style="height: 50px">
            <span data-ng-bind="item.name"></span>
        </div>
    </li>
</ul>

JS

vm.items = [
    { name: 'item 1' },
    { name: 'item 2' }
];

vm.sortableOptions = {
    containment: '#sortable-container'
};

这给了我结果：

在我的情况下，我不能使用 ng-repeat，因为我需要可排序的所有元素都具有独特且复杂的 HTML 内容，并且不可重复。出于这个原因，我尝试了这个：

HTML

<ul as-sortable="vm.sortableOptions" ng-model="vm.items">
    <li as-sortable-item class="as-sortable-item">
        <div as-sortable-item-handle class="as-sortable-item-handle">
            <span>Test1</span>
        </div>
    </li>

    <li as-sortable-item class="as-sortable-item">
        <div as-sortable-item-handle class="as-sortable-item-handle">
            <span>Test2</span>
        </div>
    </li>
</ul>

不幸的是，这给了我以下结果：

如果省略 ng-repeat，“可排序项目”似乎是“不可排序的”。有什么解决方法吗？是否可以在一个容器中简单地对 x 个 div 进行排序而不使用 ng-repeat？

Answer 1

好的，这就是我最终决定解决问题的方法，它不是最佳的，但很有效。

JS

vm.templates = [
    { url: '/test1.html' },
    { url: '/test2.html' }
];

HTML

<ul as-sortable="vm.sortableOptions" ng-model="vm.templates">
    <li ng-repeat="item in vm.templates" ng-if="item.show" as-sortable-item class="as-sortable-item">
        <div as-sortable-item-handle class="as-sortable-item-handle">
            <div ng-include="'content/scripts/app/templates'+ item.url"></div>
        </div>
    </li>
</ul>

test1.html：

<span>Test1</span>

test2.html：

<span>Test2</span>

Answer 2

您可以采取另一种方式，使用 ng-repeat 但您当然会循环遍历您自己的先前有序组件列表，其中列表中的每个对象都可以具有单个元素的类型和属性等属性。在 ng-repeat 中，您可以调用您创建的指令来为每个元素注入 hmtl 代码。这个例子只是为了给你一点想法。希望这对您有所帮助，并给您另一个观点。

html

<div ng-repeat="item in items">
   <div createhtml mid=item.mid data=item.data background=item.background mtitle=item.mtitle>
   </div>
</div>

angularjs

.directive('createhtml', ['$compile',
    function ($compile) {
       return {
             scope:{
                mid:"=",
                data:"=",
                background:"=",
                mtitle:"="
             },
             link: function(scope, element, attr) {
          function createHtmlAtFly(){
             //the html can be as complex as you want
             var htmlStr = "<div type='" + properties.type + "' mid='" + properties.mid+ "' data='" + properties.data + " ' background='" + properties.background "'+ title='" + properties.title +"'>\n" +
    "</div>\n";
           var container = element.find(".divcontainer");
           var toInsert = angular.element(htmlStr);
           container.append(toInsert);
           $compile(toInsert)(scope);
         }
         scope.$watch("data", function (newValue, oldValue) {
            //make element dynamic depending in changes on values in a controller
         }
      }
   }])