在AngularJS中输入类型号

Input type number in AngularJS

本文关键字：类型 输入 AngularJS      更新时间：2023-09-26

我在AngularJS中有一个输入类型编号，如下所示…

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

我想实现以下目标:

  • 如果用户输入一个正值，它应该显示相同的字体和颜色

  • 如果用户显示的是负数，字体颜色应为红色，表示为负数

有人能告诉我如何动态地实现这一点吗?

你可以这么做。

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

CSS

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

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

希望能有所帮助。

  <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>
相关文章：