CODEWITHSUNDEEP
angularjsangularjs-ng-repeat
Fyodor Khruschov
Fyodor Khruschov

Reputation: 1717

AngularJS. Filter table rows by select box

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.

Upvotes: 3

Views: 3505

Answers (5)

Joe
Joe

Reputation: 2596

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>

Upvotes: 2

PandAngular
PandAngular

Reputation: 101

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.

Upvotes: 0

Rahul Garg
Rahul Garg

Reputation: 378

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

Upvotes: 1

artgon
artgon

Reputation: 714

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.

Upvotes: 1

Delta
Delta

Reputation: 851

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

Upvotes: 1

Related Questions