Question

如何在此demo中为div设置动画，但动画必须在div通过ng-repeat滤镜过滤时。

我的代码：

<input class="filter_input" type="search" placeholder="Search" ng-model="search">
<div ng-repeat="product in products | filter:search | filter:brand">

$scope.$watch('Products', function(){
   $scope.setOrder();
   calcGridPosition();
}, true);

如何通过ngAnimate或自定义方法（如演示文稿）实现动画没有区别。

Answer 1

每次基本上都必须重建列表以强制它重新评估网格。如果您只对原始列表执行ng-repeat，则过滤掉项目实际上不会修改列表。动画取决于列表对象中存储的数据。

http://jsbin.com/weyoxazajo/1/edit

我最终创建了这个功能：

$scope.queryList = function(query) {
  $scope.myList = [];
  $scope.myOriginalList.forEach(function(v, i) {
    if (v.text.indexOf(query) !== -1) {
  $scope.myList.push($scope.myOriginalList[i]);    
    }
  });
  $timeout(function() {
    $scope.order = 'random';
  $scope.setOrder();   
  }, 500);
};

它在原始数据集上运行快速搜索，并将任何匹配推送到连接到ng-repeat的数组。它必须每次重建数组，重新计算网格，然后在短暂超时后运行动画。

因为此特定动画在实际存储的数据集之外运行，所以使用ng-repeat的filter / orderBy功能将不起作用。您将不得不使用您想要的任何过滤或排序预处理数据，然后将其推送到连接ng-repeat的阵列。这不是理想的，但对于这个特定的动画，它就是这样做的。过滤功能并不难创建。

对于使用ng-animate的ng-repeat工作的其他动画，请检查角度文档。他们有一个很好的例子，你可以修补：

https://docs.angularjs.org/api/ng/directive/ngRepeat

如何在AngularJS中为ng-repeat渲染的div设置动画

1 个答案: