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

时间:2016-09-16 10:01:33

标签: html css angularjs meanjs

我在我的应用程序中使用MEAN堆栈,将AngularJS作为我的前端。如何过滤表格中的两个Android.Test/iOS.Test值。My Plunker without filterMy Plunker with filter

  • 我想在表格中过滤两个ng-module值。
  • 我可以过滤单个ng-module值,例如在ng-repeat中使用此ng-module
  • 如果我在ng-repeat中使用此| filter:{raised: 'true'},我无法过滤两个ng-模块值。
  • 我非常感兴趣: - 如果| filter:{raised: 'true'}值为raised,则表示这些真值只需显示在表格中,以便我在ng-repeat中使用true过滤器
  • 如果| filter:{raised: 'true'}值也是raised_two,则表示我需要在表格中显示这些true值,以便我在ng-repeat中使用true过滤器。
  • 但是,如果我们在| filter:{raised_two: 'true'}中使用了两个ng-module过滤器,则表格显示为ng-repeat ....因此,如何在表格中过滤两个empty值。 ...
  • 我想在表格中显示ng-module模块和true模块的raised值。

我的过滤器: -

raised_two

我的HTML: -

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

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

我的控制器: -

 **<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"
    }];

2 个答案:

答案 0 :(得分:0)

您可以为此编写自己的过滤器:

<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

答案 1 :(得分:0)

你好你的问题非常有趣。根据@Dhiraj上面的评论,我认为答案可能是

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

我已在要过滤数据的colomn上设置了click事件         并相应地设置标志变量true和false         你只需要在两列上添加ng-click事件并在ng-repeat中过滤并传递flag变量以过滤它将像魅力一样工作