角度JS中的自定义搜索过滤器

时间:2016-11-24 14:11:52

标签: javascript angularjs

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

我有Invoice NumberCustomer NameFrom DateTo Datestatus搜索输入框。如果我在Invoice Number字段中输入内容,则应从发票清单数据的Invoice Number列中搜索此文本。 与其他领域相同。

查看我的截图。只有两个搜索字段Invoice NumberCustomer Name我会添加更多过滤器。

enter image description here

请告诉我如何过滤它?

我尝试使用以下过滤器。但那个人没有工作。

过滤输入:

<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字段中搜索Customer Name,我的过滤器会出错。看截图: enter image description here

3 个答案:

答案 0 :(得分:2)

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

def cyclic(lst1, lst2):
    number_success = 0
    if len(lst1) == len(lst2):  # checks to see if lists are equal length
        for i in range(len(lst1)): # starts with i index to check each spot
            for j in range(len(lst1)):  # starts with j index to test cycling
                if lst1[i] == lst2[(i+j)%len(lst1)]:
                    number_success += 1
                else:
                    continue
        if number_success == len(lst1):
            return(True)
        else:
            return(False)
    else:
        print("idiot")

答案 1 :(得分:0)

您需要做的就是这样,您将搜索绑定到一个整体名称:

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

答案 2 :(得分:0)

按照@Weedoze回答后,我创建了多个带排序的过滤器。请检查此链接 -

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

Demo