filtering ng repeat based multiple properties with AND operation in Angularjs application

Question

I have the following array of json objects in my angularjs application.

$scope.clients = [ {  
  "code": "FREG",
  "name": "Feranget",
  "role": "employee" 
},
{  
  "code": "CRTE",
  "name": "Crenart",
  "role": "admin" 
},
{  
  "code": "DERT",
  "name": "Derta",
  "role": "admin" 
} ]

I have search form where I can enter code in the put text box, to search in this clients based on code. So I have applied a filter in ng repeat on the property code, which is working fine.

<tbody ng-if="clientSearch.clientCode">
    <tr ng-repeat="client in clients | filter:{ code: clientSearch.clientCode }">
</tbody>

Now I need to support the search form with two more input fields, name and role having models as clientSearch.clientName and clientSearch.clieRole. clientSearch.clientName should be filtered on name property of the object and clientSearch.clieRoleshould be filtered on role property of the object with AND operation based on the input fileds, i.e., if code and role are entered in the respective input boxes then the clients should be filter out based on code and role but name filter should be ignored because it is empty. If name is also entered in the input box then the clients should be filtered based on code and role and name. Essentially empty fields should be ignored for filter and all non empty fields should be applied in filtering clients list with AND operation.

Here I have used the condition <tbody ng-if="clientSearch.clientCode"> so that by default clients list won't appear when input filed clientCode is empty and appear only when the entered text matches the search criteria. This feature needs to be maintained across all the three input fields clientSearch.clientName, clientSearch.clieRole and clientSearch.clientCode. When I replaced it with <tbody ng-if="clientSearch">, it is not working by default all the client list is appearing

In my controller I have input models are initialized as shown below:

$scope.clientSearch = { clientCode :'', clientName : '', clientRole : '' }

Can any one help me to solve this filtering problem in simple and genralized manner.

Check out this post stackoverflow.com/questions/18792039/… — Max Novich
– Max Novich, Commented Dec 6, 2015 at 12:23

Vivek · Accepted Answer · 2015-12-06 13:01:19Z

2

You can pass multiple fields in filter

<tbody ng-if="(clientSearch.clientCode !=null && clientSearch.clientCode !='') || (clientSearch.clientName !=null && clientSearch.clientName !='') || (clientSearch.clientRole !=null && clientSearch.clientRole !='')">
    <tr ng-repeat="client in clients | filter:{ code: clientSearch.clientCode, name: clientSearch.clientName}">
</tbody>

If you pass multiple fields to filter then AND operation will be used while filtering.

See Example : http://plnkr.co/edit/kozaU39E74yqjZCpgDqM?p=preview

edited Dec 6, 2015 at 13:01

answered Dec 6, 2015 at 12:25

Vivek

13.6k19 gold badges101 silver badges139 bronze badges

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

3 Comments

smart987 Over a year ago

vvk, your simple solution is working fine but the problem is occurring with ng-if="clientSearch.clientCode". The search results should appear only if input fields are non empty and are matching relevant search text. I have changed it to ng-if="clientSearch" but by default all list is appearing which I do not want. May be I have not emphasised this point in my question, but I need this also to be worked correctly.

smart987 Over a year ago

No need to be both either one of three is non empty and matching filter criteria then only it should display the client list. I tried with <tbody ng-if="clientSearch.clientCode || clientSearch.clientName || clientSearch.clientRole "> but by default all the list is appearing even though all the three input fields are empty.

smart987 Over a year ago

In the controller I have initialized my search models are $scope.clientSearch = { clientCode :'', clientName : '', clientRole : '' }

Jerry Chen · Accepted Answer · 2015-12-06 13:02:49Z

1

Write a customized filter,

app.filter('filterbyNameRoleCode', function(){
      return function(items,name,role,code){
         var filtered = [];

         for (var i = 0; i < items.length; i++) {

         if (itmes[i].name.indexof(name)> -1 && itmes[i].role.indexof(role)> -1 && itmes[i].code.indexof(code)> -1 ) {
          filtered.push(items[i]);
        };
      };
    } 
    return filtered;

});

then use it

<tbody ng-if="show(clientSearch)">
<tr ng-repeat="client in clients | filterbyNameRoleCode:clientSearch.clientName:clientSearch.clientRole:clientSearch.clientCode }">
</tbody>

edited Dec 6, 2015 at 13:02

answered Dec 6, 2015 at 12:37

Jerry Chen

7257 silver badges23 bronze badges

2 Comments

smart987 Over a year ago

Jerry, I have edited my question to consider ng-if condition too. Can you please include that feature also in your solution.

Jerry Chen Over a year ago

You need to write a method to check to show your table or not. You probably need to set $scope.clientSearch.clientName and other to "" as the default in your controller. It would avoid undefined issues.

Yaron Schwimmer · Accepted Answer · 2015-12-06 12:28:04Z

0

I think the most elegant way to do that (without using multiple filters or conditions in your HTML), will be creating a custom filter:

yourApp.filter('customFilter', function() {
  return function (input, obj) {
    if (/* test that input complies with your conditions obj */) {
      return true;
    }
    return false;
  };
});

HTML:

<tr ng-repeat="client in clients | customFilter:clientSearch">

answered Dec 6, 2015 at 12:28

Yaron Schwimmer

5,3675 gold badges40 silver badges60 bronze badges

Collectives™ on Stack Overflow

filtering ng repeat based multiple properties with AND operation in Angularjs application

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related