Search code examples
htmlcssangularjsmeanjs

How Can I change the filed color while approve manually in Angularjs?


I am using MEAN stack in my application with AngularJS as my front-end.How Can I change the green color to tollerence 159.06 in table as a manually. My Plunker

  • Look at My plunker to refference.

  • What we did has, we have used ng-show in the tollerrence filed if the value is greaterthan > to 100 it's should need to highlight has a red color.

  • If the value is lesserthan < to 100 means it's should need to highlight has a green color.

  • what we exactly looking for if the tollerence value is greaterthan > 100 means it's highlighting like red color, so once it's approved means this value is need to change has a green color, so how we would to do the changes as a manual,

  • Any idea about the solution, please help us..

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

My data:-

$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"
    },]
  • I have created my plunker to referrence :- My Plunker

Solution

  • first of all i would recommend you to use ngStyle instead of this ngShow. if you want to change it manualy you can add a button and add a change the value of the

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