如何使用 Angularjs 过滤器过滤表中的两个 ng-module 值？答案

【问题标题】：How to Filter Two ng-module Values in a Table using Angularjs Filter?如何使用 Angularjs 过滤器过滤表中的两个 ng-module 值？
【发布时间】：2017-01-24 12:28:00
【问题描述】：

我在我的应用程序中使用 MEAN 堆栈，并将 AngularJS 作为我的前端。如何过滤表中的两个 ng-module 值。My Plunker without filter 和 My Plunker with filter。

我想过滤一个表中的两个 ng-module 值。
我可以过滤单个 ng-module 值，例如在 ng-repeat 中使用 | filter:{raised: 'true'}。
如果我在 ng-repeat 中使用了 | filter:{raised: 'true'}，我无法过滤这两个 ng-module 值。
我在寻找什么 :- 如果 raised 值为 true 意味着这些真实值只需要显示在表格中，因此我在 ng-repeat 中使用了 | filter:{raised: 'true'} 过滤器。
如果raised_two 值也是true 意味着我需要在表格中显示这些true 值，以便我在ng-repeat 中使用| filter:{raised_two: 'true'} 过滤器..
但如果我们在ng-repeat 中使用两个ng-module 过滤器，则表格显示为empty .... 那么如何在表格中过滤两个ng-module 值....
我想在表格中显示raised 模块和raised_two 模块的true 值。

我的过滤器：-

<tr ng-repeat="data in  srdebitnote | filter:{raised: 'true'} ">

 <tr ng-repeat="data in  srdebitnote | filter:{raised_two: 'true'} ">

我的 html：-

 **<tr ng-repeat="data in  srdebitnote | filter:{raised: 'true'} ">
           <td> {{data.buyer_name}}</td>
            <td> {{data.supplier_name}}</td>
            <td> {{data.proforma_invoice_no}}</td>
            <td> {{data.purchase_order_no}}</td>
            <td> {{data.raised}}</td>
            <td> {{data.raised_two}}</td>
        </tr>**

我的控制器：-

 $scope.srdebitnote = [{
    "_id": "57db960f6a3b14d20dfb39d6",
    "user": {
    "_id": "57400c32bd07906c1308e2cf",
    "displayName": "mani selvam"
    },
    "__v": 0,
    "created": "2016-09-16T06:49:51.970Z",
    "shipment_id": "57c815a89a9b487f14b40bab",
    "raised_two": true,
    "raised": false,
    "invoice_number": "E21_56",
    "proforma_invoice_no": "6 years",
    "purchase_order_no": "8888",
    "supplier_name": "veena",
    "buyer_name": "risha"
    },

    {
    "_id": "57daa24fafebd11818b55d94",
    "user": {
    "_id": "57400c32bd07906c1308e2cf",
    "displayName": "mani selvam"
    },
    "__v": 0,
    "created": "2016-09-15T13:29:51.398Z",
    "shipment_id": "57c815a89a9b487f14b40bab",
    "raised_two": true,
    "raised": false,
    "invoice_date": "2016-09-13",
    "invoice_number": "E21_56",
    "proforma_invoice_no": "6 years",
    "purchase_order_no": "8888",
    "supplier_name": "rubi",
    "buyer_name": "kanishka"
    },

    {
    "_id": "57becb6ddc4a44520ac628f4",
    "user": {
    "_id": "57400c32bd07906c1308e2cf",
    "displayName": "mani selvam"
    },
    "__v": 0,
    "created": "2016-08-25T10:41:49.133Z",
    "shipment_id": "57becb69dc4a44520ac628f3",
    "raised_two": false,
    "raised": true,
    "invoice_number": "E21_check",
    "proforma_invoice_no": "kdkdkd",
    "purchase_order_no": "1356",
    "supplier_name": "karikalan",
    "buyer_name": "ms"
    },

    {
    "_id": "57bdaa65ecc4b1701401fce4",
    "user": {
    "_id": "57400c32bd07906c1308e2cf",
    "displayName": "mani selvam"
    },
    "__v": 0,
    "created": "2016-09-15T13:29:51.398Z",
    "shipment_id": "57c815a89a9b487f14b40bab",
    "raised_two": false,
    "raised": true,
    "invoice_date": "2016-09-13",
    "invoice_number": "E21_56",
    "proforma_invoice_no": "6 years",
    "purchase_order_no": "8888",
    "supplier_name": "rubi",
    "buyer_name": "kanishka"
    }];

如果我使用了这样的过滤器，数据在表中显示为空：-

<tr ng-repeat="data in  srdebitnote | filter:{raised: 'true'} | filter:{raised_two: 'true'} ">

我创建了 plunker 以供参考：- My Plunker without filter 和 My Plunker with filter。然后My Plunker Used filter but datas showing like empty

【问题讨论】：

如果任何一个条件为真你想显示那个表记录？？如果我错了，请纠正我
感谢您的评论是的，完全...
您可以做一件事编写自定义过滤器，该过滤器将接受您希望通过 raise 或 raise_two 过滤的参数并相应地显示数据
Selvam 您可以在任何事件发生时将它们传递给您要过滤数据的列的标题的例如 onClick
嘿，谢谢 Dhiraj 先生，您能否提供更新的 plunker 以及了解解决方案...

标签： html css angularjs meanjs

【解决方案1】：

您可以像这样为此编写自己的过滤器：

<tr ng-repeat="data in  srdebitnote | filter: raised">

//Controller
 $scope.raised = function(item){
    if (raised.raised && raised.raised_two){
        return true;
    }
    return false;
 };

如果您想使用OR 而不是AND，那么您可以过滤其中一个 条件为真。

工作 Plunkr here

【讨论】：

感谢您的宝贵回答，我已在本地主机中尝试过此操作，但效果不佳……还有其他想法吗？
你遇到了什么？提供的 Plunkr 运行良好。如果您可以发布您遇到的错误/问题，我可以进一步提供帮助
@DustinToothless 您在表格中显示数据的任一列值为真，在这种情况下您不需要任何过滤器
@DustinToothless 我已经检查了你的 plunker，并从中删除了过滤器，但我得到了相同的结果
你现在可以检查一下@PrashantPatil。我已经更新了过滤器名称。请原谅笔误

【解决方案2】：

你好你的问题很有趣。根据上面的@Dhiraj cmets，我认为答案可能是

         <table border="1">
                    <thead>
                    <tr>
                      <td>Buyer</td>
                        <td>Supplier</td>
                        <td>Invoice_Date</td>
                        <td>Term</td>
                        <td ng-click="data.raised=true; data.raised_two=false">Raised</td>
                         <td ng-click="data.raised_two=true; data.raised=false"> raised two</td>
                    </tr>
                    </thead>

                    <tbody>
                    <tr ng-repeat="data in  srdebitnote|filter:data">
                       <td> {{data.buyer_name}}</td>
                        <td> {{data.supplier_name}}</td>
                        <td> {{data.proforma_invoice_no}}</td>
                        <td> {{data.purchase_order_no}}</td>
                        <td> {{data.raised}}</td>
                        <td> {{data.raised_two}}</td>
                    </tr>
                    </tbody>
                </table>

我已经在你想要过滤数据的两个列上设置了点击事件并相应地设置标志变量 true 和 false 您只需要在两列上添加 ng-click 事件并在 ng-repeat 中过滤并传递标志变量来过滤它就会像魅力一样工作

【讨论】：