如何使用 Angularjs 过滤器过滤 Table 中的两个 ng-module 值?
How to Filter Two ng-module Values in a Table using Angularjs Filter?
我在我的应用程序中使用 MEAN 堆栈,AngularJS 作为我的前端。如何过滤 table.My Plunker without filter and My Plunker with filter.
中的两个 ng-module
值
- 我想在 table.
中过滤两个 ng-module 值
- 我可以过滤单个 ng-module 值,比如在 ng-repeat 中使用这个
| filter:{raised: 'true'}
。
- 我无法过滤两个 ng- 模块值,如果我在 ng-repeat 中使用了这个
| filter:{raised: 'true'}
。
- 我正在寻找的东西:- 如果
raised
值为 true
意味着这些真实值只需要显示在 table 中,这样我就使用了 | filter:{raised: 'true'}
在 ng-repeat 中过滤。
- 如果
raised_two
值也是 true
意味着我需要在 table 中显示这些 true
值,以便我使用 | filter:{raised_two: 'true'}
过滤器在 ng-repeat..
- 但是如果我们在
ng-repeat
中使用两个 ng-module
过滤器,table 显示为 empty
....那么我如何过滤两个 ng-module
中的值 table.....
- 我想在 table 中显示
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"
}];
如果我使用像这样的过滤器,数据在 table 中显示为空:-
<tr ng-repeat="data in srdebitnote | filter:{raised: 'true'} | filter:{raised_two: 'true'} ">
- 我创建了 plunker 以供参考:- My Plunker without filter and My Plunker with filter。然后 My Plunker 使用过滤器但数据显示为空
您可以像这样编写自己的过滤器:
<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
您好,您的问题很有意思。根据上面的@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>
我已经在您要过滤数据的两个列上设置了点击事件
并相应地设置标志变量 true 和 false
您只需要在两列上添加 ng-click 事件并在 ng-repeat 中进行过滤并传递 flag 变量进行过滤,它将像 charm
我在我的应用程序中使用 MEAN 堆栈,AngularJS 作为我的前端。如何过滤 table.My Plunker without filter and My Plunker with filter.
中的两个ng-module
值
- 我想在 table. 中过滤两个 ng-module 值
- 我可以过滤单个 ng-module 值,比如在 ng-repeat 中使用这个
| filter:{raised: 'true'}
。 - 我无法过滤两个 ng- 模块值,如果我在 ng-repeat 中使用了这个
| filter:{raised: 'true'}
。 - 我正在寻找的东西:- 如果
raised
值为true
意味着这些真实值只需要显示在 table 中,这样我就使用了| filter:{raised: 'true'}
在 ng-repeat 中过滤。 - 如果
raised_two
值也是true
意味着我需要在 table 中显示这些true
值,以便我使用| filter:{raised_two: 'true'}
过滤器在 ng-repeat.. - 但是如果我们在
ng-repeat
中使用两个ng-module
过滤器,table 显示为empty
....那么我如何过滤两个ng-module
中的值 table..... - 我想在 table 中显示
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"
}];
如果我使用像这样的过滤器,数据在 table 中显示为空:-
<tr ng-repeat="data in srdebitnote | filter:{raised: 'true'} | filter:{raised_two: 'true'} ">
- 我创建了 plunker 以供参考:- My Plunker without filter and My Plunker with filter。然后 My Plunker 使用过滤器但数据显示为空
您可以像这样编写自己的过滤器:
<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
您好,您的问题很有意思。根据上面的@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>
我已经在您要过滤数据的两个列上设置了点击事件 并相应地设置标志变量 true 和 false 您只需要在两列上添加 ng-click 事件并在 ng-repeat 中进行过滤并传递 flag 变量进行过滤,它将像 charm