Angularjsソート可能なアイテムとカテゴリは

Question

私は、このJSONの構造を有する：

{ 
    "items":[ 
     { 
     "category":"Category 1", 
     "name":"01", 
     "id":"46701a72410c" 
     }, 
     { 
     "category":"Category 2", 
     "name":"02", 
     "id":"9a18ffe9f148" 
     }, 
     { 
     "category":"Category 2", 
     "name":"03", 
     "id":"de3a49a458cc" 
     }, 
     { 
     "category":"Category 3", 
     "name":"04", 
     "id":"bb06b1eec9c8" 
     }, 
     { 
     "category":"Category 3", 
     "name":"05", 
     "id":"92973f4cfbfc" 
     }, 
     { 
     "category":"Category 3", 
     "name":"06", 
     "id":"b06bbb86d278" 
     } 
    ], 
    "categories":[ 
     { 
     "isCollapsed":false, 
     "name":"Category 1" 
     }, 
     { 
     "isCollapsed":false, 
     "name":"Category 2" 
     }, 
     { 
     "isCollapsed":false, 
     "name":"Category 3" 
     } 
    ] 
} 

を、私はui.sortable angularjsを使用してソート動作を追加しようとしています。カテゴリとアイテムの両方をソート可能にしたい。

このjsonに基づいて2つのネストされた順序付きリストを作成しましたが、ソート可能な設定を解決する方法はわかりません。このjson構造は可能ですか？

これらの設定では、仕事を分類するカテゴリだけを解決しました。問題は、アイテムが移動されたとき（間違った位置または未定義がとられたとき）です。

$scope.sortableOptionsCategories = { 
    stop: function(ev, ui) { 
     console.log("Category moved."); 
    } 
    }; 

$scope.sortableOptionsItems = { 
    connectWith: '.items-container', 
    start: function(e, ui) { 
    $(this).attr('data-previndex', ui.item.index()); 
    console.log("Start: from position " + ui.item.index()); 
    }, 

    update: function(e, ui) { 
    var newIndex = ui.item.index(); 
    var oldIndex = $(this).attr('data-previndex'); 
    $(this).removeAttr('data-previndex'); 
    console.log("Update: " + oldIndex + " -> " + newIndex); 
    }, 

    stop: function(ev, ui) { 
    console.log("Item moved."); 
    } 
}; 

UPDATE： ここに私のコードです：それは私のために完璧でしょうであるとしてJSONを保つ http://codepen.io/anon/pen/LpGmeY ソリューションは、しかし、可能でない場合、私は他のソリューションを受け入れます。

Answer 1

は、このライブラリを使用してみましたが - https://github.com/angular-ui-tree/angular-ui-tree

私はjsfiddle作成 - http://jsfiddle.net/450fk7wp/5/ - ネストされた、ソート可能、ドラッグ可能なアイテムを取り扱います。

あなたはそれがこのようになりますように、あなたのJSONを変換する必要があります：あなたが探している機能を、ソートの種類

$scope.rows = [{ 
    "name":"Category 1", 
    "columns": [ 
    { 
    "category":"Category 1", 
    "name":"01", 
    "id":"46701a72410c" 
    } 
    ], 
}, { 
    "name":"Category 2", 
    "columns": [ 
    { 
     "category":"Category 2", 
     "name":"02", 
     "id":"9a18ffe9f148" 
    }, 
    { 
     "category":"Category 2", 
     "name":"03", 
     "id":"de3a49a458cc" 
    } 
    ], 
}, { 
    "name":"Category 3", 
    "columns": [ 
    { 
    "category":"Category 3", 
    "name":"04", 
    "id":"bb06b1eec9c8" 
    }, 
    { 
    "category":"Category 3", 
    "name":"05", 
    "id":"92973f4cfbfc" 
    }, 
    { 
    "category":"Category 3", 
    "name":"06", 
    "id":"b06bbb86d278" 
    } 
    ] 
}]; 

だけ正確にわかりません。

希望すると便利です。

Answer 2

私はこれを正しく理解しました。ネストされたリストがあります。ネストされたngリピートを使用していますか？

ので、あなたがソート可能でこれを行うことができないと思われる場合はディレクティブが 更新したモデルを知っているように、

• （https://github.com/angular-ui/ui-sortableから）NG-モデルは、必要とされます。
• ui-sortable要素には、1つのng-repeatのみが含まれ、その他の要素（上または下の要素）は含まれません。

HTMLを貼り付けることはできますか？