CODEWITHSUNDEEP
javascriptangularjs
user2057006
user2057006

Reputation: 647

Filter table column angular js based on drop down

<form class="col2">
        <label for="filter-online">
             Filter by Online 
        </label>
        <div class="select">
           <select id="filter-online" ng-model="vm.online" class="form-control" ng-options="online for online in vm.onlines">
              <option value="">All</option>
           </select>
        </div>
</form>

<form class="col2">
       <label for="filter-productType">
              Filter by Product Type
       </label>
       <div class="select">
            <select id="filter-productType" ng-model="vm.productType" class="form-control" ng-options="productType for productType in vm.productTypes">
                 <option value="">All</option>
            </select>
       </div>
</form>

<tr ng-repeat="lim in vm.stockLimits track by lim.id">
      <td>{{lim.online}}</td>
      <td>{{lim.producttype}}</td>
</tr>

 vm.stockLimits values below:
 ONLINE PRODUCT TYPE
 Men    Shirt
 Men    Shoe
 Ladies Top
 Kids   belt
 Kids   
 ..........
 ..........

Based on drop down (filter_online select & filter_productType select), need to filter data in the table. Is it possible to write one custom filter javascript function in angular script file which can be used to filter both online & product type based on drop down selection? It would be great if you show me the ideas of doing it.

Upvotes: 0

Views: 4315

Answers (4)

Gunjan Kumar
Gunjan Kumar

Reputation: 125

Better you can use npm package of filter;

install it:- npm i ng2-search-filter

import this to module.ts

import { Ng2SearchPipeModule } from 'ng2-search-filter';

in html : *ngFor="let dealerdata of Dealer_data|filter:Status|filter:Range"

Upvotes: 0

NIsham Mahsin
NIsham Mahsin

Reputation: 728

You can use ng-show or ng-if to filter data.

no need to create a custom filter.

something like this.

<tr ng-repeat="lim in vm.stockLimits" ng-show="lim.productType==vm.productType && lim.online==vm.online">
    <td>{{lim.online}}</td>
    <td>{{lim.productType}}</td>
  </tr>

see full workin fiddle here http://jsfiddle.net/SNF9x/315/

Upvotes: 0

tanmay
tanmay

Reputation: 7911

I added a custom filter on your ng-repeat in such a way that it can filter out selected values dynamically from the dropdown selection.

Here's the ng-repeat:

ng-repeat="lim in vm.stockLimits | filter:{
             online:vm.online && vm.online !== '' ? vm.online : '', 
             productType: vm.productType && vm.productType !== '' ? vm.productType : ''
          }"

Find working code snippet below!

angular.module("myApp", [])
  .controller("myCtrl", function($scope) {
    var vm = this;
    vm.onlines = ["Men", "Kids", "Ladies"];
    vm.productTypes = ["Shirt", "Shoe", "Top"];
    vm.stockLimits = [{
      id: 1,
      online: "Men",
      productType: "Shirt"
    }, {
      id: 2,
      online: "Men",
      productType: "Shoe"
    }, {
      id: 3,
      online: "Kids",
      productType: "Belt"
    }, {
      id: 4,
      online: "Ladies",
      productType: "Top"
    }]
  })
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl as vm">
  <form class="col2">
    <label for="filter-online">
    Filter by Online 
  </label>
    <div class="select">
      <select id="filter-online" ng-model="vm.online" class="form-control" ng-options="online for online in vm.onlines">
        <option value="">All</option>
      </select>
    </div>
  </form>

  <form class="col2">
    <label for="filter-productType">
    Filter by Product Type
  </label>
    <div class="select">
      <select id="filter-productType" ng-model="vm.productType" class="form-control" ng-options="productType for productType in vm.productTypes">
      <option value="">All</option>
    </select>
    </div>
  </form>

  <table style="margin-top: 30px">
    <tr ng-repeat="lim in vm.stockLimits | filter:{online:vm.online && vm.online !== '' ? vm.online : '', productType: vm.productType && vm.productType !== '' ? vm.productType : ''}">
      <td>{{lim.online}}</td>
      <td>{{lim.productType}}</td>
    </tr>
  </table>
</div>

Upvotes: 2

Ben
Ben

Reputation: 2706

In AngularJS you can stack as many filters on an array as you would like on an array.

Try doing something like this:

HTML:

<select ng-model="vm.online" ng-options="online for online in vm.onlines" ng-change="vm.filterChanged()">
    <option value="">All</option>
</select>

<select ng-model="vm.productType" ng-options="productType for productType in vm.productTypes" ng-change="vm.filterChanged()">
    <option value="">All</option>
</select>

<tr ng-repeat="lim in vm.filteredStockLimits = vm.stockLimits | filterByOnline:vm.online
        | filterByProductType:vm.productType track by lim.id">

JS (Controller):

var filterChanged = function() {
        var filtered = $filter('filterByOnline')(vm.stockLimits, vm.online);
        vm.filteredStockLimits = $filter('filterByProductType')(filtered, vm.productType);
}

In your controller you read the data into your initial vm.stockLimits array which gets filtered into vm.filteredStockLimits when either select box is changed. Note, you will have to add two custom filters (filterByOnline and filterByProductType) to filter the array by the online and product type. For that you can reference the AngularJS docs: AngularJS Custom Filters

Upvotes: 0

Related Questions