How to create dynamic filter in AngularJS?

Question

data = {key:0, Name:"Arun", key:1, Name:"Ajay", key:3, Name:"Ashok"}

function dynamicfilter(data, fieldName, filtervalue){
    $filter('filter')(data, { fieldName: filtervalue });
}

How to do the dynamic filter in AngularJS. I tried like this it's not working.

But If I give field name static like

 function dynamicfilter(data, filtervalue){
        $filter('filter')(data, { Key: filtervalue });
    }

It's working. May I know how set dynamic field filter inside controller in AngularJS?

Typo there: Key in dynamicfilter() should be key, all lowercase. — Tushar
– Tushar, Commented Mar 22, 2016 at 14:22
I think what Suresh is asking is how to pass in a property name to dynamically filter an array of objects on that property. — Lex
– Lex, Commented Mar 22, 2016 at 14:23

Dennis · Accepted Answer · 2016-03-22 14:25:44Z

3

To make use of your dynamic property name, try using the property accessor with square brackets like obj[propertyName] = value:

function dynamicfilter(data, fieldName, filtervalue){
    var filter = {};
    filter[fieldName] = filtervalue;
    $filter('filter')(data, filter);
}

As of ES2015, you can also use computed property names. This may not work in all browsers though:

 $filter('filter')(data, { [fieldName]: filtervalue });

answered Mar 22, 2016 at 14:25

Dennis

14.5k3 gold badges37 silver badges56 bronze badges

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

3 Comments

Pankaj Parkar Over a year ago

inside { [fieldName]: filtervalue } having dynamic key like [fieldName] will work? I doubt about that

Dennis Over a year ago

@PankajParkar this is a new feature Computed Property Names of ES2015, I also added a link to mdn for reference, have a look at it here: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Pankaj Parkar Over a year ago

OMG!! thats nice.. I was thinking in C# way :( +1

dex · Accepted Answer · 2016-03-22 14:26:58Z

0

Using another syntax will let you do this:

var filterData = {}, key = 'myField', value = 'myValue';
filterData[key] = value;

Result: { myField: 'myValue' }

answered Mar 22, 2016 at 14:26

dex

1375 bronze badges

Comments

amir elhajjam · Accepted Answer · 2017-11-17 14:35:44Z

0

you can use somthing like this

<input type="text" [(ngModel)]="search1" value="" class = "form-control" id = "search" />

<ng-container *ngFor="let app1 of apps">
      <tr  *ngIf="!search1 || app1.name.includes(search1)">
         <td>{{app1.name}}<td>
          <td>{{app1.login}}<td>  
      </tr>
    </ng-container>

answered Nov 17, 2017 at 14:35

amir elhajjam

951 silver badge7 bronze badges

Collectives™ on Stack Overflow

How to create dynamic filter in AngularJS?

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related