在 Angularjs 中手动批准时如何更改字段颜色?
How Can I change the filed color while approve manually in Angularjs?
我在我的应用程序中使用 MEAN 堆栈,AngularJS 作为我的前端-end.How 我可以将 green color
更改为 tollerence
159.06
在 table作为手动。 My Plunker
看我的plunker参考
我们做了什么,我们在tollerrence filed中使用了ng-show
如果值是greaterthan
>
到100它应该需要突出显示有一个red color
.
如果值为lesserthan
<
到100表示应该需要高亮有一个green color
.
如果 tollerence
值是 greaterthan
我们到底在寻找什么 >
100 意味着它像 red color
一样突出显示,所以一旦它被批准意味着这个值需要更改有一个green color
,所以我们如何按照手册进行更改,
任何关于解决方案的想法,请帮助我们..
我的Html:-
<td > <p ng-show="{{(mani.invoice_quantity *1) + (mani.conversion_rate *1) | number:2}}>100" style="background-color: red;">{{(mani.invoice_quantity *1) + (mani.conversion_rate *1) | number:2}}</p>
<p ng-show="{{(mani.invoice_quantity *1) + (mani.conversion_rate *1) | number:2}}<100" style="background-color: Green;">{{(mani.invoice_quantity *1) + (mani.conversion_rate *1) | number:2}}</p></td>
我的数据:-
$scope.sryarndebitnote = [
{
"_id": "57ac1b6d82e1c5940ac3c730",
"user": {
"_id": "57400c32bd07906c1308e2cf",
"displayName": "mani selvam"
},
"__v": 0,
"created": "2016-08-11T06:30:05.118Z",
"shipment_id": "57ac19b982e1c5940ac3c72f",
"conversion_rate": "62.04",
"invoice_value_fob_currency": "Rs",
"invoice_value_fob": "300.231",
"invoice_quantity_unit": "KG",
"invoice_quantity": "37",
"invoice_date": "2016-08-17",
"supplier_name": "Msd",
"buyer_name": "Mani selvam .R"
},
{
"_id": "57b5af69df0475401f644b2e",
"user": {
"_id": "57400c32bd07906c1308e2cf",
"displayName": "mani selvam"
},
"__v": 0,
"created": "2016-08-18T12:51:53.671Z",
"shipment_id": "57b5af5bdf0475401f644b2d",
"conversion_rate": "62.06",
"exclusive": true,
"invoice_value_fob": "400.343",
"invoice_quantity": "97",
"supplier_name": "Msd",
"buyer_name": "Mani selvam .R"
},]
- 我已经创建了我的 plunker 以供参考:- My Plunker
首先,我建议您使用 ngStyle
而不是 ngShow
。如果您想手动更改它,您可以添加一个按钮并添加更改
的值
<td>
<p ng-style="{'background-color': (mani.invoice_quantity *1) + (mani.conversion_rate *1) > 100 || mani.approved ? 'green' : 'red'}">{{(mani.invoice_quantity *1) + (mani.conversion_rate *1) | number:2}}</p>
<button ng-click="mani.approved = true">Approve</button>
</td>
我在我的应用程序中使用 MEAN 堆栈,AngularJS 作为我的前端-end.How 我可以将 green color
更改为 tollerence
159.06
在 table作为手动。 My Plunker
看我的plunker参考
我们做了什么,我们在tollerrence filed中使用了
ng-show
如果值是greaterthan
>
到100它应该需要突出显示有一个red color
.如果值为
lesserthan
<
到100表示应该需要高亮有一个green color
.如果
tollerence
值是greaterthan
我们到底在寻找什么>
100 意味着它像red color
一样突出显示,所以一旦它被批准意味着这个值需要更改有一个green color
,所以我们如何按照手册进行更改,任何关于解决方案的想法,请帮助我们..
我的Html:-
<td > <p ng-show="{{(mani.invoice_quantity *1) + (mani.conversion_rate *1) | number:2}}>100" style="background-color: red;">{{(mani.invoice_quantity *1) + (mani.conversion_rate *1) | number:2}}</p>
<p ng-show="{{(mani.invoice_quantity *1) + (mani.conversion_rate *1) | number:2}}<100" style="background-color: Green;">{{(mani.invoice_quantity *1) + (mani.conversion_rate *1) | number:2}}</p></td>
我的数据:-
$scope.sryarndebitnote = [
{
"_id": "57ac1b6d82e1c5940ac3c730",
"user": {
"_id": "57400c32bd07906c1308e2cf",
"displayName": "mani selvam"
},
"__v": 0,
"created": "2016-08-11T06:30:05.118Z",
"shipment_id": "57ac19b982e1c5940ac3c72f",
"conversion_rate": "62.04",
"invoice_value_fob_currency": "Rs",
"invoice_value_fob": "300.231",
"invoice_quantity_unit": "KG",
"invoice_quantity": "37",
"invoice_date": "2016-08-17",
"supplier_name": "Msd",
"buyer_name": "Mani selvam .R"
},
{
"_id": "57b5af69df0475401f644b2e",
"user": {
"_id": "57400c32bd07906c1308e2cf",
"displayName": "mani selvam"
},
"__v": 0,
"created": "2016-08-18T12:51:53.671Z",
"shipment_id": "57b5af5bdf0475401f644b2d",
"conversion_rate": "62.06",
"exclusive": true,
"invoice_value_fob": "400.343",
"invoice_quantity": "97",
"supplier_name": "Msd",
"buyer_name": "Mani selvam .R"
},]
- 我已经创建了我的 plunker 以供参考:- My Plunker
首先,我建议您使用 ngStyle
而不是 ngShow
。如果您想手动更改它,您可以添加一个按钮并添加更改
<td>
<p ng-style="{'background-color': (mani.invoice_quantity *1) + (mani.conversion_rate *1) > 100 || mani.approved ? 'green' : 'red'}">{{(mani.invoice_quantity *1) + (mani.conversion_rate *1) | number:2}}</p>
<button ng-click="mani.approved = true">Approve</button>
</td>