Question

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

现在的问题是，当我点击过滤器类型= 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未定义..

Answer 1

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

＆＃13;

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;
  };
});

＆＃13;

.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;
}

＆＃13;

<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 -->

＆＃13;

这是一个带有AJAX示例的plunker：http://plnkr.co/edit/ZiGIfuuGnPrwRImxhiMM?p=preview

如何在过滤前清除ng-repeat

1 个答案: