Javascript 如何在过滤前清除ng REPECT

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

现在的问题是，当我从filter type=all单击到type=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未定义。

您可以使用ngAnimate，因此您可以使用更多的类，并且可以使用CSS3进行淡出和淡出

var-app=angular.module'myApp'，['ngAnimate']； app.controller'ItemsController'，['$scope'，'$filter'， 函数$scope，$filter{ $scope.filterBy='*'； $scope.filter=functionfilterBy{ $scope.filterBy=filterBy； }; //JSON中的项目 $scope.portfolions=[{ id:10， 筛选器：[web]， 标题：东博安贝网 }, { id:11， 筛选器：[web]， 标题：Quisque id odio网站 }, { id:12， 过滤器：[打印]， 标题：Pelletsque ut neque印花 }, { id:13， 筛选器：[web]， 标题：Proin viverra ligula网站 }, { 身份证号码：14， 过滤器：[打印]， 标题：Maecenas egestas arcu印花 }, { 身份证号码：15， 筛选器：[web]， 标题：博安贝网 }, { 身份证号码：16， 筛选器：[web]， 标题：IDODIO网站 }, { 身份证号码：17， 过滤器：[打印]， 标题：Ut neque印刷 }, { 身份证号码：18， 筛选器：[web]， 标题：Viverra舌苔网 }, { 身份证号码：19， 过滤器：[打印]， 标题：Egestas arcu印花 }, { 身份证号码：20， 过滤器：[网络，打印]， 标题：Web Boambee }]; } ]; //滤器 app.filter'myFilter'，函数{ 返回功能项、条件{ //全部展示 如果condition.filters===未定义| | condition.filters===='*'{ 退货项目； } //仅当是阵列前端的一部分时，如果已在后端进行了筛选，则放弃此方法 var筛选=[]； angular.forEachitems，functionitem{ 如果item.filters.indexOfcondition.filters！=-1{//inArray在JS中 过滤后的项目； } }; 返回过滤； }; }; .item.ng-enter， .第1.5项-休假{ -webkit过渡：400ms cubic-Bezier 0.250、0.100、0.250、1.000全部； -moz过渡：400ms立方贝塞尔0.250、0.100、0.250、1.000全部； -ms转换：400ms立方贝塞尔0.250、0.100、0.250、1.000全部； -o型过渡：400ms立方贝塞尔0.250、0.100、0.250、1.000全部； 过渡：400ms立方贝塞尔0.250、0.100、0.250、1.000全部； 位置：相对位置； 显示：块； } .item.ng-leave.ng-leave-active， .item.ng-enter{ -webkit转换：scale0； -moz变换：scale0； -ms变换：scale0； -o变换：scale0； 变换：scale0； 身高：0； 不透明度：0； } .item.ng-enter.ng-enter-active， .第1.5项-休假{ -webkit转换：scale1； -moz变换：scale1； -ms变换：scale1； -o变换：scale1； 变换：scale1； 高度：自动； 不透明度：1； } 全部展示 网状物 打印 {{portfolio.id}:{{portfolio.title} {{filter}}

---

你想要某种延迟，它会淡出吗？不，我想要的是一个函数，清空所有项目，然后将myFilter设置为键入：“web”。为这个问题添加了更多的解释。一个可能的解决方案是，您可以使用内置的Limito过滤器来过滤ng repeat。当用户单击时，将limito设置为0，这将不显示任何内容。过滤器准备好后，将limito设置为xList.length，这将显示所有结果。添加ngAnimate怎么样，这样在过滤重复的过程中，您就有更多的类可以玩了。我给你举个例子