采用NG-排序没有NG-重复

Question

我用NG-排序此工作示例;

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' 
}; 

这给我结果：

在我来说，我不能我们因为我需要排序的所有元素都有独特和复杂的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> 

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

的“排序项”似乎是“不可排序”如果异常-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-重复，但循环您自己的上一个列表下令组件由你，当然，这里列表中的每个对象可以有这样类型的属性和单个元素的属性。在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 
     } 
     } 
    }])