は動的角度NGリピート

Question

背景

私は、ユーザーが（ドラッグ＆ドロップを経由して）列の順序をカスタマイズすることができ、角度テーブルディレクティブを持っている中で、子要素の順序を変更します。データ行はng-repeatディレクティブを使用します。

<table columno> 
    <tr> 
     <th>Column Head 1</th> 
     <th>Column Head 2</th> 
     <th>Column Head 3</th> 
    </tr> 
    <tr ng-repeat="item in items"> 
     <td>Column 1</td> 
     <td>Column 2</td> 
     <td>Column 3</td> 
    </tr> 
</table> 

ではなくhttps://jsfiddle.net/jn1y44s6/5/ @ドラッグ＆ドロップのボタンを使用してフィドルを簡素化。

問題：

ユーザーが移動する列1列2になることを言うとき、移動が正常に動作します。新しいオブジェクトは、新しい列がオリジナルそのままの順序であるitems配列に追加されたときに問題があります。

私は、実行時に構成されたコンパイル済みのテンプレートを使用しているng-repeat理解が、どのように私は新しい列の順序があまりにも新しいオブジェクトのために持続することができますか？あなたは列がその自らのオブジェクトであるネストされたNG-の繰り返しを、必要とするよう

Answer 1

HTMLコード

<div ng-app="fiddle" columnly> 
    <button ng-click="addRow()">Add Row</button> 
    <button ng-click="move()">Move Column 1</button> 
    <table> 
     <tr class="row"> 
     <th class="column move">Row 0 Head 1</th> 
     <th class="column">Row 0 Head 2</th> 
     <th class="column">Row 0 Head 3</th> 
     </tr> 
     <tr class="row" ng-repeat="item in items"> 
     <td class="column first move">Row {{item}} Column 1</td> 
     <td class="column second">Row {{item}} Column 2</td> 
     <td class="column">Row {{item}} Column 3</td> 
     </tr> 
    </table> 
</div> 

Controller.js

var app = angular.module('fiddle', []); 
app.directive('columnly', function() { 
    return { 
     restrict: 'A', 
     link: function(scope, element, attr, $scope) { 
      var count = 6; 
      scope.items = [1, 2, 3, 4, 5]; 
      scope.firstClick = true; 
      scope.addRow = function() { 
       scope.items.push(count++); 
       if ($("tr th:nth-child(2)").hasClass('move')) { 
        setTimeout(function() { 
         var abc = $("tr:nth-child(" + count + ")").children().eq(0).html(); 
         var def = $("tr:nth-child(" + count + ")").children().eq(1).html() 
         $("tr:nth-child(" + count + ")").children().eq(1).html(abc); 
         $("tr:nth-child(" + count + ")").children().eq(0).html(def); 
         $("tr:nth-child(" + count + ")").children().eq(1).addClass('move') 
         $("tr:nth-child(" + count + ")").children().eq(0).removeClass('move') 
        }); 
       } 
      }; 
      scope.move = function() { 
       jQuery.each($("table tr"), function() { 
        $(this).children().eq(1).after($(this).children().eq(0)); 
       }); 
      }; 
     } 
    } 
}); 

フィドルリンク

[https://jsfiddle.net/Anvesh2727/jn1y44s6/10/][1]