UI-可以使用Angular過濾器對ng-repeat進行排序

如果列表中有一個正被ng重複的過濾器，那麼似乎UI可分類（https://github.com/angular-ui/ui-sortable）插件無法正常播放。拖放操作不能按預期工作。UI-可以使用Angular過濾器對ng-repeat進行排序

這是由這兩個小提琴所示：

第一：已過濾器 - 拖放不會停留在原地。

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', 
    } 
}]);

二：有沒有過濾器 - 按預期工作。

JS SAME，

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回購爲好，但如果任何人有周圍的工作，這將是偉大的創造一個問題！

來源

2016-04-22 Shawn123

在docs你可以看到

過濾器操縱模型（如過濾，排序依據，limitTo，...）應在控制，而不是NG重複（refer to the provided examples）應用。
這是因爲它的首選方式：
- 是明智的性能更好
- 減少重複代碼的機會
- 由angularJS團隊建議
- 它不會破壞所產生的DOM元素的匹配和ng模型的項目

所以是的，不要在視圖中進行過濾，它不打算與ui-sortable一起工作。

例如：

JS：

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

HTML：

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

來源

2016-04-22 15:38:58

但是：不要忘了這個解決方案將刪除數組中的項目。您可以使用一個範圍數組和一個javascript數組。原始數據在您的javascript數組中。 –

要傳遞以ng-模型的陣列。

ngModel目錄就像另一個屬性，如id可以通過角度訪問。

和ngModel在產生數據，如輸入，textarea的，選擇和其他定製指令標籤主要使用。的

簡單地代替，通過使用一般的DOM識別像

訪問來自ID數據

$ scope.variable =的document.getElementById（ 'someElement'）。值

角用途ngModel指令結合的數據在兩個方面。

來源

2016-04-22 15:39:18

UI-可以使用Angular過濾器對ng-repeat進行排序

回答

相關問題