AngularJS. Filter table rows by select box

Question

I have a table with rows which are displayed with ng-repeat. Also I have a <select>. My table rows filtered by property, selected in <select>. Here's code:

Controller:

$scope.transactionTypes = [
  "All",
  "Bonus received",
  "Invoice payment",
  "Taxes",
  "Credit transfers",
  "Withdrawals",
  "Cancelled transactions"
];

$scope.tableFilter = {};

$scope.transactions = [
   {
      "transactionType" : "Taxes"
   },
   {
      "transactionType" : "Bonus received"
   }
]

Html:

<select ng-model="tableFilter.transactionType"
        ng-options="transactionType for transactionType in transactionTypes">
</select>

<table>
    <tr ng-repeat="item in (transactions | filter:{transactionType:tableFilter.transactionType)">
       <td>{{item.transactionType}}</td>
    </tr>
</table>

I was simplified my code for you as much as I can. I hope that I described my situation clearly enough.

My question is: what is the easiest way to show all transactions (with any transactionType) when I choose 'All' property in <select>? How to clear this filter by selecting 'All' in <select>?

Thanks.

Joe · Accepted Answer · 2014-05-30 19:47:12Z

2

Set value of transactionType to '' if transactionType is 'All' and no filter will be applied.

<select ng-model="tableFilter.transactionType" ng-options="'All' == transactionType ? '' : transactionType as transactionType for transactionType in transactionTypes"></select>

answered May 30, 2014 at 19:47

Joe

2,5962 gold badges16 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Fyodor Khruschov Over a year ago

Thanks. I've found this the easiest way to fix the problem

Delta · Accepted Answer · 2014-05-30 19:36:17Z

1

 <tr ng-repeat="item in (transactions | filter:tableFilter.transactionType:checkForAll">
       <td>{{item.transactionType}}</td>
 </tr>


$scope.checkForAll = function(option, currentValue)
{
 if(currentValue == $scope.transactionTypes[0])
    return true;
 else
    return option == currentValue;    
}

try that.

edited May 30, 2014 at 19:36

answered May 30, 2014 at 19:26

Delta

8611 gold badge6 silver badges12 bronze badges

Comments

artgon · Accepted Answer · 2014-05-30 19:39:39Z

1

You can write a custom filter that can take a variable bound to "Select All".

More information here: https://docs.angularjs.org/guide/filter

I can provide an example too, if this doesn't solve your problem.

answered May 30, 2014 at 19:39

artgon

7241 gold badge6 silver badges9 bronze badges

Comments

Rahul Garg · Accepted Answer · 2014-05-30 19:43:33Z

I got it to work using the below. There might be a better solution though...

index.html:

<!doctype html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body ng-controller="ctrl">


    <select ng-model="tableFilter.transactionType"
        ng-options="transactionType for transactionType in transactionTypes">
    </select>

    <table>
        <tr ng-repeat="item in (transactions | filter:myFilter)">
           <td>{{item.transactionType}}</td>
        </tr>

    </table>

    <script src= "angular.js"></script>
    <script src= "app.js"></script>
</body>
</html>

app.js:

var app = angular.module('app', []);

app.controller('ctrl', function($scope) {
    $scope.transactionTypes = [
      "All",
      "Bonus received",
      "Invoice payment",
      "Taxes",
      "Credit transfers",
      "Withdrawals",
      "Cancelled transactions"
    ];

    $scope.useFilter = false;

    $scope.tableFilter = {};

    $scope.transactions = [
       {
          "transactionType" : "Taxes"
       },
       {
          "transactionType" : "Bonus received"
       }
    ];

    $scope.myFilter = function(tran) {
        //debugger;
        if ($scope.tableFilter.transactionType == "All" || !$scope.tableFilter.transactionType)
            return true;
        else if($scope.tableFilter.transactionType == tran.transactionType)
            return true;
        else
            return false;
    }
});

PandAngular · Accepted Answer · 2014-05-30 19:43:57Z

0

You can set the fitter for all to be empty string ''. When all will be selected the filter will be set to empty string and this will make the entire transactions visible.

Your custom filter looks fine.

answered May 30, 2014 at 19:43

PandAngular

1013 bronze badges

Collectives™ on Stack Overflow

AngularJS. Filter table rows by select box

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related