UI-ng-repeatの角度フィルタで並べ替え可能

Question

リストに角度で繰り返し表示されているフィルタがあると、UIソート可能なプラグインが正しく再生されないようです。ドラッグアンドドロップは意図したとおりには機能しません。

これは、これらの2つのフィドルで示されている：

まず：フィルタを持っています - ドラッグ＆ドロップは場所に滞在しないでしょう。

http://jsfiddle.net/Lvc0u55v/2886/

HTML：

<div ng-controller="Controller"> 
    <ul ui-sortable="sortableOptions" id="test" ng-model="items"> 
    <li class="line" ng-repeat="item in items | filter: myFilter">   
     {{item.name}} 
    </li> 
    </ul> 
</div> 

JS：

var myApp = angular.module('myApp',['ui.sortable']); 

myApp.controller('Controller', ['$scope', function($scope) { 
    $scope.name = 'Superhero'; 
    $scope.items = [ 
     {name: 'TEST'}, 
     {name: 'TEST2'}, 
     {name: 'TEST3'}, 
     {name: 'TEST4'}, 
     {name: 'TEST5'}, 
     {name: 'TEST6'}, 
     {name: 'TEST7'}, 
     {name: 'TEST8'} 
    ] 

    $scope.myFilter = function (item) { 
     return item.name !== 'TEST'; 
    }; 
    $scope.sortableOptions = { 
     opacity: '0.8', 
     axis: 'y', 
     tolerance: 'pointer', 
    } 
}]); 

第二：何のフィルターを持っていない - 意図したとおりに動作します。 SAME

JS、

HTML：

<div ng-controller="Controller"> 
    <ul ui-sortable="sortableOptions" id="test" ng-model="items"> 
    <li class="line" ng-repeat="item in items"> 
     {{item.name}} 
    </li> 
    </ul> 
</div> 

http://jsfiddle.net/Lvc0u55v/2887/

私は彼らのgithubのレポ同様の問題を作成しますが、誰もがその周りに仕事を持っている場合は素晴らしいことです！ docsで

Answer 1

あなたはモデルを操作

フィルタ（フィルタ、ORDERBY、limitToのように、...）の代わりにNGリピート（refer to the provided examples）のコントローラに適用されるべきであると見ることができます。
これは、それ以来、好ましい方法である：
- パフォーマンス賢明な優れた
は - コードの重複
の機会を減少させる - angularJSチーム
によって提案された - それは、生成されたDOM要素のマッチングを破壊しないとng-modelのアイテム

だから、ビューでフィルタリングしないでください。それはui-sortableで動作するようにはなっていません。例えば

：

JS：

$scope.filtered= $filter('filter')($scope.items, $scope.myFilter); 

HTML：

<li class="line" ng-repeat="item in filtered">   
    {{item.name}} 
</li> 

Answer 2

あなたはNG-モデルに配列を渡しています。

ngModelディレクトリは、角度でアクセスできるidのような別の属性と同じように機能します。

とngModelはほとんど入力、TEXTAREA、をおよび他のカスタムディレクティブを選択しように、データを生成するタグに使用されます。

単に代わりに

$ scope.variable =のdocument.getElementById（ 'someElement'）のような一般的なDOMの識別を使用してIDからデータにアクセスする。角度値

は、データをバインドするngModelディレクティブを使用して両方の方法で。