並べ替え可能なng：angularjsで繰り返し？

StackOverflow https://stackoverflow.com/questions/7354992

質問

使いやすいですか jQuery.sortable の上 ng-repeat Angularjsの要素？

アイテムを再注文すると、その注文がソースアレイに戻って自動的に伝播する場合、それは素晴らしいことです。私は2つのシステムが戦うのではないかと心配しています。これを行うためのより良い方法はありますか？

役に立ちましたか？

解決

Angular UIには、ソート可能な指令があります。デモについてはここをクリックしてください

にあるコード ui-sortable, 、 利用方法：

<ul ui-sortable ng-model="items">
  <li ng-repeat="item in items">{{ item }}</li>
</ul>

他のヒント

私は同じことをしようとし、次の解決策を思いつきました。

angular.directive("my:sortable", function(expression, compiledElement){
    return function(linkElement){
        var scope = this;
        linkElement.sortable(
        {
            placeholder: "ui-state-highlight",
            opacity: 0.8,
            update: function(event, ui) {
                var model = scope.$tryEval(expression);
                var newModel = [];
                var items = [];
                linkElement.children().each(function() {
                    var item = $(this);
                    // get old item index
                    var oldIndex = item.attr("ng:repeat-index");
                    if(oldIndex) {
                        // new model in new order
                        newModel.push(model[oldIndex]);
                        // items in original order
                        items[oldIndex] = item;
                        // and remove
                        item.detach();
                    }
                });
                // restore original dom order, so angular does not get confused
                linkElement.append.apply(linkElement,items);

                // clear old list
                model.length = 0;
                // add elements in new order
                model.push.apply(model, newModel);

                // presto
                scope.$eval();

                // Notify event handler
                var onSortExpression = linkElement.attr("my:onsort");
                if(onSortExpression) {
                    scope.$tryEval(onSortExpression, linkElement);
                }
            }
        });
    };
});

このように使用： 

<ol id="todoList" my:sortable="todos" my:onsort="onSort()">

かなりうまく機能しているようです。トリックは、モデルを更新する前に並べ替えられるDOM操作を元に戻すことです。そうしないと、AgularはDOMから非同期化されます。

変更の通知は、コントローラーメソッドを呼び出すことができるMy：Onsort式を介して機能します。

Angular Todoチュートリアルに基づいてJSFiddleを作成して、それがどのように機能するかを示しました。 http://jsfiddle.net/m8ynr/180/

これは、Angular V0.10.6で私がそれをしている方法です。これが次のとおりです jsfiddle

angular.directive("my:sortable", function(expression, compiledElement){
    // add my:sortable-index to children so we know the index in the model
    compiledElement.children().attr("my:sortable-index","{{$index}}");

    return function(linkElement){
        var scope = this;            

        linkElement.sortable({
            placeholder: "placeholder",
            opacity: 0.8,
            axis: "y",
            update: function(event, ui) {
                // get model
                var model = scope.$apply(expression);
                // remember its length
                var modelLength = model.length;
                // rember html nodes
                var items = [];

                // loop through items in new order
                linkElement.children().each(function(index) {
                    var item = $(this);

                    // get old item index
                    var oldIndex = parseInt(item.attr("my:sortable-index"), 10);

                    // add item to the end of model
                    model.push(model[oldIndex]);

                    if(item.attr("my:sortable-index")) {
                        // items in original order to restore dom
                        items[oldIndex] = item;
                        // and remove item from dom
                        item.detach();
                    }
                });

                model.splice(0, modelLength);

                // restore original dom order, so angular does not get confused
                linkElement.append.apply(linkElement,items);

                // notify angular of the change
                scope.$digest();
            }
        });
    };
});

jquery.uiのない並べ替え可能なangular.js指令の私の実装は次のとおりです。

軽量で、jQueryを使用していないNG-Sortableディレクティブに行くことができます。これがリンクです ng-sortableドラッグアンドドロップ要素

ng-sortableのデモ

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top