javascript - AngularJS, filter only if a variable is true - Stack Overflow

admin管理员组

文章数量:1433896

I have an ng-repeat with many filters.

(1) From an input field:

<input type="text" ng-model="search">

(2) Another one from a list of buttons:

<ul id="element_filter" class="uk-subnav uk-subnav-pill uk-margin-remove">
    <li ng-class="statusFilter == '' ? 'uk-active' : ''"><a ng-click="statusFilter = ''">Tutti</a></li>
    <li ng-class="statusFilter == '1' ? 'uk-active' : ''"><a ng-click="statusFilter = '1'">Nuovo</a></li>
</ul>

Connected to a custom filter named filtraStato

(3) Than I have a checkbox:

<div class="uk-width-medium-1-6">
    <input type="checkbox" name="checkbox_demo_inline" id="checkbox_mostra_zone" ng-model="openFiltraZone" data-md-icheck />
    <label for="checkbox_mostra_zone" class="inline-label">Filtra Zone</label>
</div>

This is also connected to a custom filter filtraZona

I then have an ng-repeat where the filter filtraZona should be active only if the checkbox openFiltraZone is checked.

I don't know what to put on the repeater expression in order to apply the filter only if openFiltraZone is checked

<tr ng-repeat="cliente in clienti | filter:search | filtraStato:statusFilter | filtraZona:zonaFilter">

I have an ng-repeat with many filters.

(1) From an input field:

<input type="text" ng-model="search">

(2) Another one from a list of buttons:

<ul id="element_filter" class="uk-subnav uk-subnav-pill uk-margin-remove">
    <li ng-class="statusFilter == '' ? 'uk-active' : ''"><a ng-click="statusFilter = ''">Tutti</a></li>
    <li ng-class="statusFilter == '1' ? 'uk-active' : ''"><a ng-click="statusFilter = '1'">Nuovo</a></li>
</ul>

Connected to a custom filter named filtraStato

(3) Than I have a checkbox:

<div class="uk-width-medium-1-6">
    <input type="checkbox" name="checkbox_demo_inline" id="checkbox_mostra_zone" ng-model="openFiltraZone" data-md-icheck />
    <label for="checkbox_mostra_zone" class="inline-label">Filtra Zone</label>
</div>

This is also connected to a custom filter filtraZona

I then have an ng-repeat where the filter filtraZona should be active only if the checkbox openFiltraZone is checked.

I don't know what to put on the repeater expression in order to apply the filter only if openFiltraZone is checked

<tr ng-repeat="cliente in clienti | filter:search | filtraStato:statusFilter | filtraZona:zonaFilter">

• javascript
• angularjs

Share Improve this question Follow edited Oct 7, 2016 at 15:52 rzelek 4,02311 gold badge3636 silver badges3636 bronze badges asked Dec 20, 2015 at 17:55 Mr.WebMr.Web 7,18688 gold badges5454 silver badges8989 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

You could simply have it like

item in items | filter: box ? search: ''"

Demo Plunkr

A little late to the party, but this works for me with angular 1.x:

| filter:{other filters, active: (active ? true : "")}

I think that the only way is to write custom filter function for that, like this:

In controller/directive:

var _filter = $filter('filtraZona');
$scope.filterFnc = function(elem) {
  if(!$scope.openFiltraZone) return true; //leave on list when openFiltraZone is not checked
  return _filter([elem], $scope.zonaFilter).length > 0; //this will get filtraZona filter and apply it to one element array (created with [elem] expression) with $scope.zonaFilter parameter. Whole expression will return true only if filtraZona will not filter out elem.
}

In view:

<tr ng-repeat="cliente in clienti | filter:search | filtraStato:statusFilter | filter:filterFnc">

I believe that this is the only way if you do not want to change filtraZona filter. Please notice, that this is not the most cpu-efficient way.

If you can change filtraZona implementation, you can add simple pre-check to it's code:

angular.filter('filtraZona', function() {
  return function(arr, param1, checkboxChecked) {
    var arr2 = [];
    angular.forEach(arr, function(elem) {
      if(!checkboxChecked) arr2.push(elem);
      //rest of filtraZona logic goes here
    });
    return arr2;
  };
});

And use it this way (notice second parameter to filtraZona):

<tr ng-repeat="cliente in clienti | filter:search | filtraStato:statusFilter | filtraZona:zonaFilter:openFiltraZone">

本文标签： javascriptAngularJSfilter only if a variable is trueStack Overflow