0

アプリケーションに AngularJS プラグインを実装しようとしていますが、正しく動作させることができません。私は何か間違ったことをしているかもしれません。

並べ替え可能な 2 つのパネルがあります。一度だけ位置を入れ替えることができます。その後、彼らはもう場所を交換しません。

これが私の問題の例です: 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>

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});
  }
});
4

2 に答える 2

0

通常、ループが実行されるたびにリストをソートするインデックスでリストをソートしようとしています。divを何度交換しても、インデックスでソートされたリストになります。

li タグの ng-repeat から「track by $index」を削除すると機能します。

注: 「バックエンドでインデックスを維持している場合にのみ、"track by $index" を使用する必要があります。」

于 2015-08-27T03:36:41.350 に答える
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 に答える