javascript - Angular JS 中的自定义搜索过滤器

Question

我在列表页面中列出了一些发票。我有多个搜索输入。我想搜索相关数据，我将在相关领域上传。

我有发票号码、客户名称、起始日期、截止日期和状态 搜索输入框。如果我在发票号码字段中输入某些内容，则应从发票列表数据的发票号码列中搜索此文本。 与其他领域相同。

看我的截图。只有两个搜索字段发票号码和客户名称我将添加更多过滤器。

请告诉我如何过滤它？

我尝试过使用以下过滤器。但那个不起作用。

过滤输入:

<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_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>

如果我在客户名称字段中搜索2016113CC，我会得到错误的过滤器。看截图:

Answer 1

您应该定义将使用您的输入的属性

<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>