using angularjs to dynamically apply css styles

Below is the input I have:

The HTML code is shown below:

 <input type="number" ng-class="{negative: amount < 0}" ng-model="amount"/>

This is the corresponding CSS code:

 .negative {
         color: red;
 }

If the amount is positive, no specific style will be applied. However, if the amount is negative, it will use the ".negative" class to display the font in red color.

I would like the "positive" class to show up when the amount is a positive number as well.

Could someone please provide guidance on how to handle both positive and negative values?

Here is the CSS for the positive class:

.positive {
         color: blue;
}

Answer №1

To achieve this without using a function, you can follow these steps:

<input type="number" ng-class="{positive: amount >= 0, negative: amount < 0}" ng-model="amount"/>    

Check out a visual example on this CodePen link.

Answer №2

Another option is to use a more sophisticated ng-class.

<input type="number" class="positive" ng-class="{'negative': amount < 0, 'positive': amount > 0, 'zero': amount == 0}" ng-model="amount"/>

Answer №3

In my opinion, if you want to dynamically assign a class to a field based on the value entered, one approach is to utilize the ng-class directive along with a function that determines which class should be applied.

<input type="number" ng-class="determineClass(amount)" ng-model="amount"/>

$scope.determineClass = function(value){
  return value >= 0 ? 'positive': 'negative';
}

Answer №4

give this a shot

<input type="number" ng-class="{'positive': amount >= 0, 'negative': amount < 0}" ng-model="amount"/>

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

What can be used instead of the html5 output tag?

After creating a webpage with a form that includes several "number" input fields, I utilized the html output tag to showcase the results. However, when viewed in MSIE, although the calculations were successfully done, the output tag failed to display the ...

Loading React Components dynamically depending on user input

Looking to dynamically render different Components based on checkbox selections without unnecessary component imports. Using an Array with Component names (using numbers for example) to import each component based on the array values. Considered the foll ...

Disable or eliminate the event listener

Working on my Angular2 application, I've set up an RxJS timer that sends notifications to users when they are logged in. The twist is, the notification should only be sent if the tab is active; otherwise, the scheduler should pause or stop. I have man ...

I possess an array with a specific structure that I wish to substitute the keys as demonstrated below

The data array is currently structured in this way. I have attempted various methods but have not been able to find a suitable solution. I need to send the JSON below via an AJAX request, however, I do not want the keys 0 and 1 in both child arrays. [sch ...

The pseudo element 'not' in CSS is currently not functioning as expected when applied to an anchor tag

When working with CSS, I encountered an issue while trying to apply a pseudo element on hover and active states of anchor tags. Unfortunately, my code was not producing the desired outcome. a:not(a[name="nobgcolor"]):hover{color:#ffff35;background-color:# ...

Issue with Click event not working on dynamically added button in Angular 8

My goal is to dynamically add and remove product images when a user clicks the add or delete button on the screen. However, I am encountering an issue where the function is not being called when dynamically injecting HTML and binding the click event. Below ...

Tips for resolving the issue of windows resizing due to off-screen elementsplacement:

During the development of a project, I wanted to incorporate an effect into my webpage. To achieve this, I positioned elements off the screen. However, upon running the code, the window resized with scrollbars, causing inconvenience for mobile users Below ...

Adjust the position of the element by lifting it slightly

I am looking to adjust the positioning of the number "01 / 04" to match the layout shown in this image: Here is what I have accomplished so far: This is how the code structure looks like in vue js at the moment: <img id="theZoomImage" sizes="100vw" : ...

Using Angular 2 to access information from the OpenWeather API

Trying to integrate weather data from an openweather API has presented a challenge. The object received contains an array of 40 objects representing the weather forecast for the next 5 days with a 3-hour interval. The issue lies in displaying this 5-day fo ...

SELENIUM is unable to choose a name that is generated by JavaScript code

Hello, this is the HTML code I am trying to work with: <input type="text" name="input[220].pk[202].name['CODICE_ORDINE_OLO'].value" alias="" value="" pattern=".*" class="form-control form- ...

Looping twice in Angular over the same data source

I'm working with angularjs and have the code snippet below: <div ng-app> <div ng-controller="myCtrl"> <div ng-repeat="data in job.data"><!-- get unique loads --> <!-- output load --> & ...

Explore a vast array of items in a collection

I have a massive collection of various objects that I need to sift through. With over 60,000 elements, the search operation can sometimes be painfully slow. One typical object in this array has the following structure: { "title": "title" "company": ...

Develop interactive applications with React Native by generating N animated values

Currently, I am in the process of developing a component known as a "Color Palette," which includes a prop called "paletteColors." The "paletteColors" prop is an array with varying lengths that houses color values represented as strings. Within this comp ...

Is there a way to arrange an array based on the initial value?

In my array, I have a mixture of strings and arrays. Each string corresponds to the array next to it. For example, the string 789 is associated with the array ['111A', '222B', '333C']. My goal is to sort based on the strings w ...

What is the best way to save website information in SQL Server?

My website is www dot abc dot com and it contains some valuable content that I want to store in SQL Server. Can this be done using DOM? If not, please recommend alternative methods. I've searched this forum for similar solutions but haven't found ...

Guide to presenting JSON data with ajax

I am trying to dynamically display data based on the selected value from a drop-down list using Ajax's GET method. The idea is to modify the URL by appending the selected item in order to retrieve relevant data from the server: Here is an example of ...

Creating a dynamic ng-options in AngularJS

Why does this code work: <select ng-model="country" ng-options="{{selectOptions}}"> <option style="display:none" value="">Select country</option> </select> The json country list consists of objects with properties {id :... ...

Navigating the Path: Strategies for Caching Server-side Rendering in Next Js

I recently developed a Next JS Project along with a REST API implemented in PHP. My website is heavily reliant on API requests, which has prompted me to consider caching certain data points. I want to minimize the frequency of API requests for improved ef ...

The successful Ajax POST request does not result in an update to the JSON file

I am facing an issue with adding data to a *.JSON file. Despite receiving a "success" message from Ajax, the file remains unchanged. I have also noticed that when the JSON file is empty, nothing happens at all. Can someone help me find a solution? I'm ...

Dynamic font sizing in CSS allows text on a webpage to

I am working on creating a dynamic screen using AngularJS. Within this screen, there are objects with a specific size: .item { margin: auto; margin-bottom: 10px; width: 11vw; height: 11vw; text-overflow: ellipsis; overflow: hidden; } These i ...