從輸入類型編號獲取帶小數的整個值

Question

我有一個數字類型的輸入字段。 我想檢索用戶輸入的確切值而不丟失焦點。

1. 用戶輸入1時應返回1
2. 用戶輸入11時應返回11
3. 當用戶輸入11 。 它應該返回11. （但它返回的值不帶小數-11）

我嘗試過的事情：我嘗試過keyup事件，但是元素的值始終不帶小數。 還嘗試了modelctrl.parsers.push()但是當輸入為十進制（點）時解析器不會觸發。

我已經檢查了modelctrl.$viewValue ， modelctrl.$modelValue 。 一切都返回沒有小數的值。

我不知道它將返回完整值的正確事件。

Answer 1

像在這個演示小提琴中那樣嘗試。 這是在JavaScript / AngularJS / HTML5中處理浮點值的正確方法。

視圖

<div ng-controller="MyCtrl">
  <input type="number" 
         step="0.01" 
         ng-class="{ 'error' : error }" 
         ng-model="test" 
         ng-change="change()" />
  <br >
  Number output: {{ test | number:2 }}
</div>

AngularJS應用

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function ($scope) {
    $scope.test = 0.2;
    $scope.error = false;

    $scope.change = function () {

      console.log($scope.test);

      if (!$scope.test) {
            $scope.error = true;
      } else {
            $scope.error = false;
      }
    }
});

Answer 2

<div ng-app="myApp" ng-controller="myCtrl">
No: <input type="text" ng-model="no" ng-change="changeNoDecimal(no)"><br>
{{no1}}
</div>


<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.changeNoDecimal = function(no){
        $scope.no1 = Number(no).toFixed(2);
    }   
});
</script>