UI-Sortable with Angular filter for ng-repeat答案

【问题标题】：UI-Sortable with Angular filter for ng-repeatUI-Sortable with Angular filter for ng-repeat
【发布时间】：2016-04-22 14:58:09
【问题描述】：

如果列表中有一个过滤器正在被 Angular 重复，那么 UI 可排序 (https://github.com/angular-ui/ui-sortable) 插件似乎无法正常播放。拖放无法按预期工作。

这由这两个小提琴显示：

首先：有过滤器 - 拖放不会留在原地。

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 相同，

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 存储库上创建一个问题，但如果有人能解决这个问题，那就太好了！

【问题讨论】：

标签： javascript jquery angularjs jquery-ui

【解决方案1】：

在docs你可以看到

操纵模型的过滤器（如 filter、orderBy、limitTo 等）应在控制器中应用，而不是 ng-repeat (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>

【讨论】：

但是：不要忘记此解决方案将删除数组中的项目。您可以使用一个范围数组和一个 javascript 数组。原始数据在您的 javascript 数组中。

【解决方案2】：

您正在 ng-model 中传递一个数组。

ngModel 目录的工作方式就像另一个属性，如 id 可以通过 angular 访问。

和 ngModel 主要用于产生数据的标签，如 input、textarea、select 和其他自定义指令。

简单地而不是通过使用像

这样的通用 DOM 标识来访问来自 id 的数据

$scope.variable = document.getElementById('someElement').value

angular 使用 ngModel 指令以两种方式绑定数据。

【讨论】：