Chinmay235 Chinmay235 - 13 days ago 9
Javascript Question

Custom search filter in angular JS

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.

enter image description here

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:
enter image description here

Answer

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>