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.

Answer 1

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>

Answer 2

 <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.