using angularjs to dynamically apply css styles

Question

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

javascript html css angularjs ng-class

Answer 1

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

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 3

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 4

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 5

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 6

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 7

Answer №4

give this a shot

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

Answer 8

give this a shot

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

using angularjs to dynamically apply css styles

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Utilizing ReactJS onBlur event for email field validation

How can you establish a default value on a paper select in Polymer?

Is there a way to use JavaScript to choose options within a <select> element without deselecting options that are disabled?

Ban on the utilization of emojireact-role in external channels

Warning: React detects a missing dependency within an interval in the effect

What is the process of sending a file to a server and storing it in a MySQL database?

Are there any ways to pass an onClick function to a controller in React?

Having difficulty retrieving items from Mongoose-Node database

Changing direction of arrow upon dropdown menu opening with JavaScript

React component state change in reverse

What is the best way to manage the back button functionality on pages that use templates?

Getting JSON or JSONP data through a XAMPP local server is a straightforward process

How come my form isn't functioning properly on mobile devices?

Utilizing JavaScript regex to remove substrings that contain parentheses

Not implementing auto-scroll feature because of the presence of `position: sticky` or `position: fixed` CSS properties

There seems to be an issue with Node.js/Express: the page at /

Using AngularJS to bind models to a multidimensional array

Optimal method for creating a seamless loop of animated elements passing through the viewport

Adjusting the width of row items in Angular by modifying the CSS styles

Using Vue.js along with vuex and axios allows for data retrieval only upon the second load