如何在过滤前清除ng-repeat

Question

我想要的效果是在过滤之前清除重复内的所有项目。所以当我点击一个过滤器按钮时，ng-repeat应该全部淡出，然后所有适合过滤器类型的项目都应该淡入。

现在的问题是，当我从过滤器类型=全部点击类型= web当它淡出所有不适合已被点击的过滤器类型的项目时，会有一些奇怪的定位问题。所以这就是为什么我想动画所有物品消失和我们需要的项目淡入淡出。

page.html中

<button type="button" class="filter-click" ng-click="myFilter = {type: 'web'}">Web</button> 
<button type="button" class="filter-click" ng-click="myFilter = {type: 'all'}">Web</button> 
<button type="button" class="filter-click" ng-click="myFilter = {type: 'print'}">Web</button> 

<div class="portfolio-item" ng-repeat="item in xList | filter:myFilter">test</div> 

我试图用一个指令，但不知道如何调用过滤器。 scope.myFilter是未定义的。

Answer 1

你可以使用ngAnimate，所以你有更多的类可以玩，你可以使用CSS3淡出和淡入淡出。

var app = angular.module('myApp', ['ngAnimate']); 
 

 
app.controller('ItemsController', ['$scope', '$filter', 
 
    function($scope, $filter) { 
 

 
    $scope.filterBy = '*'; 
 

 
    $scope.filter = function(filterBy) { 
 
     $scope.filterBy = filterBy; 
 
    }; 
 

 
    //Items in JSON 
 
    $scope.portfolios = [{ 
 
     "id": 10, 
 
     "filters": ["web"], 
 
     "title": "East Boambee Web" 
 
    }, { 
 
     "id": 11, 
 
     "filters": ["web"], 
 
     "title": "Quisque id odio Web" 
 
    }, { 
 
     "id": 12, 
 
     "filters": ["print"], 
 
     "title": "Pellentesque ut neque Print" 
 
    }, { 
 
     "id": 13, 
 
     "filters": ["web"], 
 
     "title": "Proin viverra ligula Web" 
 
    }, { 
 
     "id": 14, 
 
     "filters": ["print"], 
 
     "title": "Maecenas egestas arcu Print" 
 
    }, { 
 
     "id": 15, 
 
     "filters": ["web"], 
 
     "title": "Boambee Web" 
 
    }, { 
 
     "id": 16, 
 
     "filters": ["web"], 
 
     "title": "Id odio Web" 
 
    }, { 
 
     "id": 17, 
 
     "filters": ["print"], 
 
     "title": "Ut neque Print" 
 
    }, { 
 
     "id": 18, 
 
     "filters": ["web"], 
 
     "title": "Viverra ligula Web" 
 
    }, { 
 
     "id": 19, 
 
     "filters": ["print"], 
 
     "title": "Egestas arcu Print" 
 
    }, { 
 
     "id": 20, 
 
     "filters": ["web","print"], 
 
     "title": "Web Boambee" 
 
    }]; 
 
    } 
 
]); 
 

 

 
//Filter 
 
app.filter('myFilter', function() { 
 
    return function(items, condition) { 
 

 
    //Show All 
 
    if (condition.filters === undefined || condition.filters === '*') { 
 
     return items; 
 
    } 
 

 
    //Only if is part of the array (frontend only, if the filter has been made on backend, get rid of this method) 
 
    var filtered = []; 
 
    angular.forEach(items, function(item) { 
 
     if (item.filters.indexOf(condition.filters) !== -1) { //inArray() in JS 
 
     filtered.push(item); 
 
     } 
 
    }); 
 
    return filtered; 
 
    }; 
 
});

.item.ng-enter, 
 
.item.ng-leave { 
 
    -webkit-transition: 400ms cubic-bezier(0.250, 0.100, 0.250, 1.000) all; 
 
    -moz-transition: 400ms cubic-bezier(0.250, 0.100, 0.250, 1.000) all; 
 
    -ms-transition: 400ms cubic-bezier(0.250, 0.100, 0.250, 1.000) all; 
 
    -o-transition: 400ms cubic-bezier(0.250, 0.100, 0.250, 1.000) all; 
 
    transition: 400ms cubic-bezier(0.250, 0.100, 0.250, 1.000) all; 
 
    position: relative; 
 
    display: block; 
 
} 
 
.item.ng-leave.ng-leave-active, 
 
.item.ng-enter { 
 
    -webkit-transform: scale(0); 
 
    -moz-transform: scale(0); 
 
    -ms-transform: scale(0); 
 
    -o-transform: scale(0); 
 
    transform: scale(0); 
 
    height: 0; 
 
    opacity: 0; 
 
} 
 
.item.ng-enter.ng-enter-active, 
 
.item.ng-leave { 
 
    -webkit-transform: scale(1); 
 
    -moz-transform: scale(1); 
 
    -ms-transform: scale(1); 
 
    -o-transform: scale(1); 
 
    transform: scale(1); 
 
    height: auto; 
 
    opacity: 1; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular-animate.js"></script> 
 

 
<div ng-app="myApp"> 
 
    <div ng-controller="ItemsController"> 
 

 
    <div class="row"> 
 
     <button class="btn" ng-click="filter('*')">show all</button> 
 
     <button class="btn" ng-click="filter('web')">Web</button> 
 
     <button class="btn" ng-click="filter('print')">Print</button> 
 
    </div> 
 
    <!-- /.row --> 
 

 
    <div class="row"> 
 
     <div ng-animate="'animate'" class="item col" ng-repeat="portfolio in portfolios | myFilter:{filters:filterBy} | limitTo:12 "> 
 
     <h2>{{portfolio.id}}: {{portfolio.title}}</h2> 
 
     <p> 
 
      <span ng-repeat="filter in portfolio.filters">{{filter}}</span> 
 
     </p> 
 
     <hr> 
 
     </div> 
 
     <!-- /.item --> 
 
    </div> 
 
    <!-- /.row --> 
 
    </div> 
 
    <!-- /ItemsController --> 
 
</div> 
 
<!-- /myApp -->

这里是一个AJAX例如plunker：http://plnkr.co/edit/ZiGIfuuGnPrwRImxhiMM?p=preview