2

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

Improve this question
5
  • filter:{InvoiceField : invoice_name} Commented Nov 24, 2016 at 14:18
  • @Weedoze What is InvoiceField ? Commented Nov 24, 2016 at 14:21
  • The name of the property inside x Commented Nov 24, 2016 at 14:27
  • Please add the code inside <tr></tr> Commented Nov 24, 2016 at 14:27
  • @Weedoze updated my question. Can you please check. Commented Nov 24, 2016 at 14:30

3 Answers 3

Reset to default
2

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>
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Can you please say me what is invoice_number and invoice_name in ng-repeat filter? I guess invoice_number is name of the invoice number field. Am I right?
This is solution is not robust, If I need to search for 10 column headers, you saying I need to repeat filters?
Oh I see the probs, it should be x.invoice_number and not x. invoice_name
@Chinmay235 It is from the x object x.invoice_number
0

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>
Improve this answer

7 Comments

If I search invoice number 2016113CC in Customer Name filed then my result should be null. Because 2016113CC this not customer name.
Ideally it shouldn't should you anything because that input will only search for invoices that match customer name. So entering 2016113CC should show nothing. But then if you want null to show you'll need to leverage on ng-if
I am guess you want to show a message when you enter 2016113CC into Customer Name probably a message like Not Found.
See my updated question. 1 record coming instead of empty row. I have already put a condition <div ng-if="invoice.length==0">No record found<div>
No no I am asking about search filter. look my updated question.
|
0

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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.