Angular JS Filter - Filter by 3 checkboxes

Question

I have a sales array and I want to filter by the status of the sale action (finished, pending or/and failed). What I am trying is to show entire list, and unchecking the checkboxes some rows will disapear.

HTML Code

<div class="row" ng-repeat="sale in salesArray  | filter: okStatus | filter: pendingStatus | filter: failedStatus">
    <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1">
       <i ng-class="'icon ' + sale.icon + ( sale.status == 'ok' ? ' text-green' : (sale.status == 'pending' ? ' text-amber' : ' text-red') )"></i>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
       <|sale.user|>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
       <|sale.product|>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
       <|sale.price | currency:"$"|>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
       <|sale.date|>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
    </div>
</div>
<ul class="justified-list">
   <li>
      <div class="checkboxer checkboxer-green form-inline">
          <input type="checkbox" id="checkboxColor10" ng-model="okStatus" ng-value="ok">
           <label for="checkboxColor10">Finalizados (<|(salesArray | filter: {status: 'ok'}).length|>)</label>
        </div>
    </li>
    <li>
        <div class="checkboxer checkboxer-amber form-inline">
            <input type="checkbox" id="checkboxColor14" ng-model="pendingStatus" ng-value="pending">
            <label for="checkboxColor14">En proceso (<|(salesArray | filter: {status: 'pending'}).length|>)</label>
        </div>
    </li>
    <li>
       <div class="checkboxer checkboxer-red form-inline">
            <input type="checkbox" id="checkboxColor1" ng-model="failedStatus" ng-value="failed">
           <label for="checkboxColor1">Abortados (<|(salesArray | filter: {status: 'failed'}).length|>)</label>
       </div>
    </li>
</ul>

Controller Code:

$scope.okStatus = "";
$scope.pendingStatus = "";
$scope.failedStatus = "";
$scope.salesArray = [
    {icon: "ion-checkmark-round", user: "Jtd", price: 123.32, product: "Sesión de una hora", date: "12/02/2015", status: "ok"},
    {icon: "ion-close-round", user: "Tar", price: 53.00, product: "Sesión de media hora", date: "14/02/2016", status: "failed"},
    {icon: "ion-compass", user: "Rao", price: 103.90, product: "Sesión de 45 minutos", date: "15/03/2016", status: "pending"}
];

How can I get this filter? Is obvious now it is not working

Plnkr here: http://plnkr.co/edit/DtltSCw7wSI85wpJ9z8J?p=preview — Maria Ines Parnisari, May 18 '16 at 17:22
See this answer: http://stackoverflow.com/questions/24191265/how-to-disable-an-angularjs-filter-when-checkboxes-are-false-disabled — Maria Ines Parnisari, May 18 '16 at 17:27

Karthik · Answer 1 · 2016-05-18T17:44:41.697

if the value of the ng-class is expression, then it should be placed {}.
Make it like switch case. For example 'class to be applied':'the condition' with separated commas as shown below..

HTML Code:

<i ng-class="{'text-green':(sale.status == 'ok'),'
 text-amber':(sale.status == 'pending'), 'text-red':(sale.status != 'pending')}"></i>

The logic be could written in function and the method could be called similar to below. Ensure construct the return structure as you want.

HTML Code:

<i ng-class="getDisplayClass(sale.icon, sale.status)"></i>

Controller Code:

$scope.getDisplayClass = function(saleicon, status) {
if (status == 'ok')
    return 'icon' + saleicon + 'text-green';
else if (status == 'pending')
    return 'icon' + saleicon + 'icon text-amber';
else 
    return 'icon' + saleicon + 'icon text-red';
}

score 0 · Accepted Answer · edited May 23 '17 at 11:59

I combined knowledge from several other SO questions to suggest a solution:

Bind all checkboxes to a single model
Use a custom filter to filter the sales according to the checkboxes model

The solution can look like this (better to look at the plunkr):

HTML

  <body ng-app="app" ng-controller="ctrl">
    <label ng-repeat="status in statuses">
  <input
    type="checkbox"
    name="selectedStatuses[]"
    value="{{status}}"
    ng-checked="selection.indexOf(status) > -1"
    ng-click="toggleSelection(status)"
  > {{status}}
</label>

<div ng-repeat="sale in salesArray | selectedFilter:selection">{{ sale.user }} | {{sale.product}} | {{sale.status}}</div>
  </body>

JS

app = angular.module('app', []);
app.filter('selectedFilter', function() {
  return function(items, options) {
    var filtered = [];
    for (var i = 0; i < items.length; i++) {
      var item = items[i];
      if (options.indexOf(item.status) != -1) {
        filtered.push(item);
      }
    }
    return filtered;
  };
});
app.controller('ctrl', ['$scope', function($scope) {
  $scope.statuses = ['ok', 'pending', 'failed'];

  $scope.selection = ['ok', 'pending', 'failed'];

  // toggle selection for a given fruit by name
  $scope.toggleSelection = function toggleSelection(status) {
    var idx = $scope.selection.indexOf(status);

    // is currently selected
    if (idx > -1) {
      $scope.selection.splice(idx, 1);
    }

    // is newly selected
    else {
      $scope.selection.push(status);
    }
  };

  $scope.salesArray = [{
    icon: "ion-checkmark-round",
    user: "Jtd",
    price: 123.32,
    product: "Sesión de una hora",
    date: "12/02/2015",
    status: "ok"
  }, {
    icon: "ion-close-round",
    user: "Tar",
    price: 53.00,
    product: "Sesión de media hora",
    date: "14/02/2016",
    status: "failed"
  }, {
    icon: "ion-compass",
    user: "Rao",
    price: 103.90,
    product: "Sesión de 45 minutos",
    date: "15/03/2016",
    status: "pending"
  }];


}]);

The plunkr works and fits so perfect. You the best! I wish I had your knowledge! Thanks a lot — Javier Torron Diaz, May 19 '16 at 07:06
I'm happy it was helpful! It is [recommended to mark an answer as accepted](http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work) (if it is indeed the most helpful). — OzW, May 19 '16 at 07:29
I added to my code, but it works reverse, I changed ng-checked statement and now it runs PERFECT! Thanks a lot! — Javier Torron Diaz, May 19 '16 at 07:46

Angular JS Filter - Filter by 3 checkboxes

2 Answers2