我正在尝试在我的应用程序中实现一个AngularJS插件,但我无法让它正常工作。我可能做错了。
我有两个可排序的面板。我只能交换一次他们的职位。之后他们将不再交换位置。
以下是我的问题示例: http://plnkr.co/edit/44fN6h6VyIft7j7bvs4j?p=preview
任何人都知道问题是什么以及如何解决这个问题?
<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>
App.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});
}
});
答案 0 :(得分:0)
正常情况下,你试图按索引对列表进行排序,每次循环运行时对它进行排序,无论你交换div多少次,它都会按索引排序。
删除&#34;跟踪$ index&#34;来自li标签上的ng-repeat,它将起作用。
注意: &#34;您应该使用&#34;跟踪$ index&#34;只有当你在后端维护索引时才会这样做。&#34;
答案 1 :(得分: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