Custom search filter in angular JS

Question

I have listed some invoice in my listing page. I have multiple search input. I want to search related data which I will upload in related field.

I have Invoice Number, Customer Name, From Date, To Date and status search input box. if I enter something in Invoice Number field This text should be search from the Invoice Number column from invoice listing data. Same as other field.

See my screenshot. There have only two search field Invoice Number and Customer Name I will add more filter.

Please say me how to filter it?

I have tried with below filter. But that one not working.

Filter Input:

<input name="invoice_number" placeholder="Invoice Number" class="form-control ng-model="invoice_name" type="text">
<input name="customer_name" placeholder="Customer Name" class="form-control" ng-model="customer_name" type="text">

Listing:

<tr class="gradeU" ng-repeat="x in invoice| filter:invoice_name | filter:customer_name">       
     <td>{{ x.invoice_number}}</td>                      
     <td>{{ x.customer_name}}</td>                          
     <td >{{ x.company_name}}</td>                          
     <td style="text-align: right;">{{ x.total_invoice | currency : $}}</td>                          

     <td style="text-align: center;">{{ x.created | datetime }}</td>      
     <td style="text-align: center;">                                  
         <a href="preview-invoice/{{x.unique_id}}"   target="_blank"><button class="btn btn-success btn-xs" uib-tooltip="Preview Invoices" tooltip-placement="top"><i class="fa fa-file-pdf-o"></i></button></a>
         <a href="download-invoice/{{x.invoice_number}}.pdf" ><button class="btn btn-warning btn-xs" uib-tooltip="Download Invoices" tooltip-placement="top"><i class="fa fa-download"></i></button></a>
    </td>                       
</tr>

If I searched 2016113CC in Customer Name field I am getting wrong filter. See screenshot:

Answer 1

After follow the @Weedoze answer I have created multiple filter with sorting. Please check this link -

https://github.com/AngularJScript/AngularJS-Search-Multiple-Sort-column-Filter-Example

Demo

Answer 2

What you need to do is something like this, you'll bind the search to an overall name:

<input name="invoice_number" placeholder="Invoice Number" class="form-control ng-model="search.invoice_number" type="text">
<input name="customer_name" placeholder="Customer Name" class="form-control" ng-model="search.customer_name" type="text">

<tr class="gradeU ng-scope" ng-repeat="x in invoice | filter:search">
    //more code here
</tr>

Answer 3

You should define on what property your input will be used

<input name="invoice_number" placeholder="Invoice Number" class="form-control ng-model="invoice_name" type="text">
<input name="customer_name" placeholder="Customer Name" class="form-control" ng-model="customer_name" type="text">
<tr class="gradeU" ng-repeat="x in invoice| filter:{invoice_number : invoice_name} | filter:{customer_name : customer_name}">       
     <td>{{ x.invoice_number}}</td>                      
     <td>{{ x.customer_name}}</td>                          
     <td >{{ x.company_name}}</td>                          
     <td style="text-align: right;">{{ x.total_invoice | currency : $}}</td>                          

     <td style="text-align: center;">{{ x.created | datetime }}</td>      
     <td style="text-align: center;">                                  
         <a href="preview-invoice/{{x.unique_id}}"   target="_blank"><button class="btn btn-success btn-xs" uib-tooltip="Preview Invoices" tooltip-placement="top"><i class="fa fa-file-pdf-o"></i></button></a>
         <a href="download-invoice/{{x.invoice_number}}.pdf" ><button class="btn btn-warning btn-xs" uib-tooltip="Download Invoices" tooltip-placement="top"><i class="fa fa-download"></i></button></a>
    </td>                       
</tr>