Hernan Bessera Hernan Bessera - 6 months ago 27
Javascript Question

How to make my button (clear filters) only appears when filters are use

well that's really my question. I have a button that clears all my filters but I only want it to be shown when any of the filters is used. How can I make that? I need that appears when range filter or filter hotel is used. thanks!!

Button that clear filters

.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


hotel-root-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;
};
}

})();


filter-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() {}
})();


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


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

}
})();


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

you can keep the filterd result by the following:

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

and compare the result with the original data, if the filters are being used then they will be different from each other.

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

refer example below:

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