Как очистить ng-repeat перед фильтрацией

Question

Как очистить ng-repeat перед фильтрацией

0

Эффект, который я хочу, состоит в том, чтобы очистить все элементы внутри повтора до его фильтрации. Поэтому, когда я нажимаю кнопку фильтра, 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 не определено.

Raymond the Developer 03 июль 2015, в 01:26

Источник

Теги:

javascript

angularjs

1 ответ

Ещё вопросы

Leo Caseiro · Answer 1 · 2015-07-02T22-54-00.000Z

Вы можете использовать ngAnimate, поэтому у вас есть больше классов для игры, и вы можете сделать fadeout и fadein с помощью 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: http://plnkr.co/edit/ZiGIfuuGnPrwRImxhiMM?p=preview