Input type number in AngularJS

Question

I have a input type number in AngularJS as follows...

<input type="number"></input>

I want to achieve the following:

If user enters a positive value, it should display the same font and color
If the user displays a negative value, it should display font color in red indicating it is a negative number

Can someone please let me know how to achieve this dynamically?

Jon · Accepted Answer · 2016-06-30 20:08:58Z

1

You could do this.

HTML

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

CSS

.negative {
   color: red;
}
.positive {
    color: green;
}

edited Jun 30, 2016 at 20:08

answered Jun 29, 2016 at 23:14

Jon

2,71123 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Patrick Over a year ago

Hi John, this works well. Wat if i have 2 classes. one class for positive value and one for negative value. How can i achieve that situation ?

Jon Over a year ago

Patrick, I have edited my answer to account for positive values as well. All you need to do is add a new condition to ng-class and also create an additional class to reflect that in the CSS.

MSA · Accepted Answer · 2016-06-29 23:10:13Z

1

<input type="number" ng-change="amountChanged()" ng-style="myStyle.color" ng-model="amount"/>

$scope.myStyle= {};
$scope.amountChanged = function () {

   if($scope.amount < 0)
   {
      $scope.myStyle.color= {"color":"green"};
   }
   else
   {
      $scope.myStyle.color= {"color":"blue"};
   }

}

Hope it helps.

answered Jun 29, 2016 at 23:10

MSA

1347 bronze badges

1 Comment

Patrick Over a year ago

instead of ng-style, can i use ng-class and assign a class directly ?

Rodrigo Garcia · Accepted Answer · 2016-06-29 23:13:40Z

1

  <input type="number" ng-model="number">
    <label ng-show="number > 0" style="color:green;">You are Correct</label>
    <label ng-show="number < 0" style="color:red;">Your number is negative</label>

answered Jun 29, 2016 at 23:13

Rodrigo Garcia

581 silver badge7 bronze badges

Collectives™ on Stack Overflow

Input type number in AngularJS

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related