Is there a way to manually change the field color upon approval in AngularJS?

Within my application that utilizes the MEAN stack, I am using AngularJS as the front-end technology. How can I manually change the color representation of a tolerance value to 159.06 in a table? Check out my Plunker for more details.

  • Please refer to my Plunker for guidance.

  • We have implemented the use of ng-show in the tolerance field, where if the value is greater than 100, it should be highlighted in red.

  • If the value is less than 100, it should be highlighted in green.

  • We are aiming to highlight the tolerance value in red if it's over 100 and then switch the color to green once it's approved. Any suggestions on how we can achieve this manually?

  • If you have any ideas for a solution, please assist us with your expertise.

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"
    },]
  • You can find my plunkr example here :- My Plunker

Answer №1

In this scenario, it is advisable to utilize ngStyle instead of relying solely on ngShow. To manually trigger a change, consider adding a button that can update the value within the element.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A guide to retrieving all image URLs when a checkbox is selected using Javascript

My goal is to extract only image URLs from the concatenated values of price and picture URL. However, when I check different images using checkboxes, it always displays the URL of the first selected image. When I try to split the value, all the prices and ...

Creating a custom function in JavaScript to interact with the `windows.external` object specifically for use

In my current project, I am facing an issue with JavaScript file compatibility across different browsers. Specifically, I have a JavaScript file that calls an external function (from a separate file) using windows.external, like this: windows.external.se ...

Customize WordPress pages by adding a variety of unique logos for a

I am currently customizing a WordPress theme (Increate themes) for a client. They are looking to have a page with different content and a unique logo. My question is, how can I change the logo specifically for this page? This is the section of code in my ...

Using Bootstrap's nav-pills inside a table

Is there a way to incorporate Bootstrap Nav Pills into a table, with the "tab buttons" located in the last row of the table? I've attempted it but it doesn't seem to be functioning correctly. Check out this link for reference <table clas ...

I'm looking to incorporate XML data into table cells using JQuery. How can I go about creating this table?

I am currently working on creating a 16x4 table in JQuery for a "Meet the Staff" page that will feature information on 16 employees. Each row of the table will contain details such as the employee's name, image, position in the company, and a brief de ...

(Bootstrap) Implementing inline block properties to ensure consistent column display

I am currently working on improving the column layout of a website. However, I am facing an issue where there are large blank spaces if the text lengths or image sizes vary. To test out the theme, I have included some sample products in the image below. h ...

Cross-border PHP document

Each PHP page must begin with the following code: <?php $host="localhost"; // Host name $username=""; // MySQL username $password=""; // MySQL password $db_name=""; // Database name $tbl_name=""; // Table name // Connect to server and select datab ...

Is it possible to use JavaScript for detecting third-party videos?

I'm currently developing an HTML5 video player that also has a fallback to flash. One of the challenges I am facing is that the video content is being provided by various third-party sources. It seems that some of these third parties serve videos bas ...

AngularJS $scope variable is not defined during page load

Experiencing difficulties retrieving service data to include in the variable's scope. Below is my controller code: 'use strict'; var app = angular.module('ezcms2App.controllers', []); app.controller('NoticiaCtrl', [&apo ...

Stop the text from wrapping to the full width of its parent when it overflows onto the following line

When I shrink the width in responsive design, the text overflows to the next line and the text wrapper expands to fit the parent container. Is there a way to prevent this behavior so that it looks like the red container? I could add padding to the contain ...

JavaScript code to toggle the navigation bar on mobile devices

I am experiencing an issue with a script that is not performing the desired task. I am looking for a script that can add the Class "active" to a ul element with the id "btnMob0". Currently, my script looks like this: <script type="text/javascript"> ...

storing the input values in a cache

When a user enters a query into the search form and submits it, they are taken to a results page displaying the search results. If the user then clicks on the browser's back button, I want them to be directed back to the search form with their previou ...

JavaScript - The onkeypress event continuously adds text to the end

In my Angular application, I have implemented an input field with the onkeypress event handler to automatically remove any commas entered by the user: <input name="option" ng-model="main.optionToAdd" onkeypress="this.value = this.value.replace(/,/g ...

Rotating an HTML caret using CSS does not pivot from the center point

Is there a way to adjust my simple caret rotation to make it rotate from the center? What changes should I make? const Wrap = styled.div` width: 100px; background: grey; span { display: block; transform: ${(props) => (props.isOpen ? " ...

Designing a structure with a stationary header, immobile sidebar navigation, and unchanging content using flexbox styling

In the development of a web application, I am utilizing FlexBox for layout design. It is important to note that I am opting for pure flexbox CSS rather than incorporating Bootstrap. Desired Layout Structure: Row1: Consists of a fixed header 64px in heigh ...

Creating a dropdown in AngularJS using ng-if within an ng-repeat loop

I am in the process of creating a list using Twitter Bootstrap and Angular's ng-repeat: <ul class="dropdown dropdown-menu"> <li class="menuOption" ng-repeat="option in options"> <a data-ng-click="option.value>0 ? foo() : ...

Opting for CSS3 transitions over jQuery animate

Currently, I am working on animating a block of HTML that involves fading in (opacity) and slightly moving from the left (margin-left)... $('.latest-stats').delay(1000).animate({ opacity: 1, marginLeft: '55px' }, 1000, function () { ...

Ways to modify the header color of a card by utilizing a Select element in Javascript, while ensuring that it does not impact other cards

I am facing an issue with multiple cards, each containing a Select element. When a user selects an option from the Select element, the card header changes color, but it also affects all other card headers. How can I separate them? [data-background-co ...

When clicked, the DIV expands to fit the size of the window

Is there a way to use jQuery to expand a div to full screen when clicked, and change the content or layout of the div? I have a small div on my webpage with text or images inside, and I want it to enlarge when clicked so it fills the entire window with m ...

Employ AngularJS UI-Router for creating a summary page

My web application is built using AngularJs with ui-router. The app contains multiple forms, with the number of forms varying depending on the user's needs. Each form has its own unique ui-route state, allowing users to navigate through and submit in ...