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，“sortable-items”似乎是“不可分类的”。这有什么解决方法吗？是否可以简单地在一个容器内对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
         }
      }
   }])

使用ng-sortable而不用ng-repeat

2 个答案: