Javascript angular JS中的自定义搜索过滤器

我已经在我的列表页面中列出了一些发票。我有多个搜索输入。我想搜索我将在相关字段中上载的相关数据

我有

发票编号

，

客户名称

，

起始日期

，

截止日期

和

状态

搜索输入框。如果我在

发票编号

字段中输入内容，则应从发票列表数据的

发票编号

列中搜索此文本。 与其他字段相同

看我的截图。只有两个搜索字段

发票编号

和

客户名称

，我将添加更多过滤器

请告诉我如何过滤它

我试过下面的过滤器。但那个不起作用

过滤器输入：

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

---

您需要做的是这样的事情，将搜索绑定到一个全名：

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

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

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

遵循@Weedoze答案后，我创建了多个带排序的过滤器。请检查此链接-


filter:{InvoiceField:invoice\u name}
@Weedoze什么是
InvoiceField
？在
x
中的属性名称请在
@Weedoze更新了我的问题。请检查。如果我在
客户名称
字段中搜索发票编号
2016113CC
，则我的结果应为空。因为
2016113CC
这不是客户名称。理想情况下，它不应该给您任何东西，因为
input
只会搜索与客户名称匹配的发票。因此，输入
2016113CC
应该不会显示任何内容。但是，如果您希望null显示，那么您需要利用
ng if
我想当您在
Customer Name
中输入
2016113CC
时，您可能希望显示一条消息，例如
Not Found
。请参阅我更新的问题。1条记录将出现，而不是空行。我已经设置了一个条件
未找到任何记录
否否我正在询问有关搜索筛选器的问题。请看我更新的问题。您能告诉我ng重复过滤器中的
发票号和
发票名是什么吗？我猜
invoice\u number
是发票编号字段的
name
。我说得对吗？这是一个不可靠的解决方案，如果我需要搜索10个列标题，你是说我需要重复筛选？哦，我看到问题了，它应该是
x.invoice\u number
而不是
x。发票名称
@Chinmay235它来自
x
对象
x.发票编号
<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>