Question

好吧，那真的是我的问题。我有一个清除所有过滤器的按钮，但我只希望在使用任何过滤器时显示它。我该怎么做？我需要在使用范围过滤器或过滤器酒店时出现。谢谢！

清除过滤器的按钮

 .filterheader
  .filter-ctn
    .filterheader
      h4 Filtrar
      span(class="delete-filter" ng-click="$ctrl.hotelsResultController.$onInit()")<i class="fa fa-times" aria-hidden="true"></i> Eliminar Filtros
    .filtercontainer

酒店-根component.js

(function () {
    'use strict';

    angular
        .module('hotelsResult')
        .component('hotelsRoot', {
            bindings: {},
            controller: hotelsResultController,
            templateUrl: "hotel-result/hotels-root.html"
        });

    hotelsResultController.$inject = ['hotelsService'];

    function hotelsResultController(hotelsService) {
        const self = this;

        self.filterOnHotels = [];

        this.$onInit = function () {
            hotelsService.getHotels().then(function (hotels) {
                self.hotels = hotels;
                self.filterOnHotels = hotels;
            });
            this.filters = {
              "name" : "",
              "targetName" : "",
              "price":{
                "priceMin" : 0,
                "priceMax": 3250,
              },
              "stars":{
                "all": true,
                "five": false,
                "four": false,
                "three" : false,
                "two" : false,
                "one" : false
              },
            }
        };

        this.getHotels = function () {
            return self.filterOnHotels;
        };
    }

})();

过滤header.component.js

(

    function (){

      'use strict';

      angular
      .module('filters')
      .component('filterHeader', {
        bindings:{},
        require: {
            hotelsResultController : '^hotelsRoot'
        },
        controller: filterHeaderController,
        templateUrl: "hotel-result/filters/filterheader/filterheader.html"
      });

        function filterHeaderController() {}
    })();

过滤hotel.component.js

(function (){
  'use strict';

  angular
  .module('filters')
  .component('filterHotel', {
    bindings:{
      "filters" : '<'
    },
    templateUrl: 'hotel-result/filters/filterhotel/filterhotel.html'
  }).filter('filterHotel', function() {
      var self = this;
      return function (hotels,targetName) {
          return hotels.filter(function (hotel) {
              return hotel.name.toLowerCase().indexOf(targetName.toLowerCase()) != -1;
          })
      }
    })
})();

过滤range.component.js

(function (){

  'use strict';

  angular
  .module('filters')
  .component('filterNight',{
    controller: filterNightController,
    require: {
      hotelsResultController : '^hotelsRoot'
    },
    bindings:{
      "filters" : '<'
    },
    templateUrl: "hotel-result/filters/filternight/filternight.html"
  }).filter('filterNight',function () {
      return function (hotels,price) {
          return hotels.filter(function (hotel) {
              return (hotel.price >= price.priceMin && hotel.price <= price.priceMax);
          });
      }
    });

  function filterNightController (){
    let self = this;

    this.slider = {
      value: 150,
      options: {
        minRange: 200,
        noSwitching: true,
        pushRange: true,
        onChange : this.filterNight
      }
    };

  }
})();

项-list.jade

ul
    li(ng-repeat="hotel in $ctrl.hotels | filterHotel: $ctrl.filters.targetName | filterStar: $ctrl.filters.stars | filterNight: $ctrl.filters.price")  
        item(item='hotel')

Answer 1

您可以通过以下方式保留过滤结果：

ul
li(ng-repeat="hotel in filterResult = ($ctrl.hotels | filterHotel: $ctrl.filters.targetName | filterStar: $ctrl.filters.stars | filterNight: $ctrl.filters.price)")  
    item(item='hotel')

并将结果与原始数据进行比较，如果使用过滤器，那么它们将彼此不同。

span(class="delete-filter" ng-if="filterResult.length !== $ctrl.hotels.length" ng-click="$ctrl.hotelsResultController.$onInit()")<i class="fa fa-times" aria-hidden="true"></i> Eliminar Filtros

参考下面的例子：

＆＃13;

angular.module("app", [])
  .controller("myCtrl", function($scope) {
    $scope.data = [
      {
        id: 1,
        data: 'data for item1'
      },
      {
        id: 2,
        data: 'data for item2'
      },
      {
        id: 3,
        data: 'data for item3'
      },
      {
        id: 4,
        data: 'data for item4'
      }
    ];
  })

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
  <input type="text" ng-model="test">
  <button ng-if="filterResult.length !== data.length">Filter Used</button>
  
  <div ng-repeat="item in filterResult = (data | filter: test)">
    <span>{{item.id}} - {{item.data}}</span>
  </div>
</div>

＆＃13;

如何在使用过滤器时显示我的按钮（清除过滤器）

1 个答案: