Angularjs 只能使用angular ui树插件进行一次排序
我试图在我的应用程序中实现一个AngularJS插件,但我无法让它正常工作。我可能做错了什么 我有两个可排序的面板。我只能交换他们的位置一次。在那之后,他们再也不会交换位置了 下面是我的问题的一个例子: 有人知道问题是什么,我如何解决这个问题吗Angularjs 只能使用angular ui树插件进行一次排序,angularjs,angular-ui-tree,Angularjs,Angular Ui Tree,我试图在我的应用程序中实现一个AngularJS插件,但我无法让它正常工作。我可能做错了什么 我有两个可排序的面板。我只能交换他们的位置一次。在那之后,他们再也不会交换位置了 下面是我的问题的一个例子: 有人知道问题是什么,我如何解决这个问题吗 Plnkr代码(示例中的完整代码): 这很正常,您尝试按索引对列表进行排序,每当循环运行时,都会按索引对列表进行排序,无论您交换div多少次,最终都会按索引对列表进行排序 从ng repeat on li标记中删除“track by$index”,它
Plnkr代码(示例中的完整代码):
这很正常,您尝试按索引对列表进行排序,每当循环运行时,都会按索引对列表进行排序,无论您交换div多少次,最终都会按索引对列表进行排序 从ng repeat on li标记中删除“track by$index”,它将正常工作 注:
只有在后端维护索引时,才应使用“track by$index”。使用angular ui树时,必须引用父级和索引 只需将您的
ng repeat=“list.items中的元素按$index跟踪
更改为ng repeat=“list.items中的元素按$id跟踪(元素)”>
,就这样;)
此处的工作解决方案:
<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>
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});
}
});