0

我正在尝试在我的应用程序中实现一个 AngularJS 插件，但我无法真正让它正常工作。我可能做错了什么。

我有两个可排序的面板。我只能交换他们的位置一次。之后，他们将不再交换位置。

这是我的问题的一个例子： http ://plnkr.co/edit/44fN6h6VyIft7j7bvs4j?p=preview

任何人都知道问题是什么以及如何解决这个问题？

Plnkr 代码（示例中的完整代码）：

<button type="button" ng-click="addItem('item1.html');">Add item 1</button>
<button type="button" ng-click="addItem('item2.html');">Add item 2</button>

<div ui-tree class="dd">
    <ol ui-tree-nodes ng-model="list.items" class="dd-list">

        <li ui-tree-node class="dd-item dd3-item" ng-repeat="element in list.items track by $index">
            <div class="panel panel-default">
                <div class="panel-heading clearfix">
                  Heading
                </div>
                <div id="settings-body{{$index}}" class="panel-body" data-nodrag>
                    <ng-include src="element.name"></ng-include>
                </div>
            </div>
        </li>

    </ol>
</div>

应用程序.js

var app = angular.module('plunker', ['ui.tree']);

app.controller('MainCtrl', function($scope) {
  $scope.list = {};
  $scope.list.items = [];

  $scope.addItem = function(name) {
    $scope.list.items.push({name: name});
  }
});
4

2 回答 2

0

使用 angular-ui-tree 时必须引用父级和索引。

只需将您的更改ng-repeat="element in list.items track by $index为ng-repeat="element in list.items track by $id(element)">就是这样;)

工作解决方案：http: //plnkr.co/edit/K9duKVxNP6jCOlfuVPSQ ?p=preview

于 2015-08-28T10:18:22.350 回答
0

这是正常的，您尝试按索引对列表进行排序，每次循环运行时都会对其进行排序，无论您交换 div 多少次，它都会以按索引排序的列表结束。

从 li 标签上的 ng-repeat 中删除“track by $index”，它将起作用。

注意：“只有在后端维护索引时，才应该使用“track by $index”。”

于 2015-08-27T03:36:41.350 回答