Angularjs輸入ng型號只有兩位小數或數字

我有一個具有在控制器中聲明的默認值，並通過ng-model傳遞'val：1.81'。這種輸入必須是數字（類型：數字）。通過角度過濾器，通過過濾器「數字2」設法在下一行打印僅兩位小數。另外，我需要包含幾個按鈕來添加或減去「0.01」，如計數器值輸入。Angularjs輸入ng型號只有兩位小數或數字

有沒有什麼方法可以過濾只有兩位小數的輸入？我提到這一點，因爲當我通過點擊按鈕來總結時，有一段時間，輸入打印例如'1.8800000000000001'。

Original JS Bin

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

 
app.controller("mainCtrl", function($scope) 
 
{ 
 
    $scope.val = 1.80; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="mainCtrl"> 
 
    <br/><br/> 
 
    <div> 
 
    <span style="color: red">Val input:</span> 
 
    <input type="number" ng-model="val"/> 
 
    <button ng-click="val = val - 0.01">-0.01</button> 
 
    <button ng-click="val = val + 0.01">+0.01</button> 
 
    </div> 
 
    <div>Val: {{val | number:2}}</div> 
 
    
 
    <hr> 
 
    
 
    Val2 (val + 20): {{ val2 = val + 20 | number:2 }} 
 
    
 
    <hr> 
 
    
 
    Val2 input: 
 
    <input type="number" ng-model="val2"/> 
 
    
 
</div>

來源

2015-06-10 maestro mutenrroy

請參考https://stackoverflow.com/a/4640423有關在彩車小數精度參考。

爲了您的具體的例子是這樣應該足夠：

$scope.val = parseFloat(($scope.val - 0.01).toFixed(2));

同樣，你也可以使用.toPrecision（3）來代替。

編輯：我看到你也問如何過濾用戶輸入到2個十進制的情況。對於這種情況，最好的選擇是觀察值的變化，並按照@alesc的建議進行相應的調整。

EDIT2：我建議你離開邏輯控制器中的良好做法：

$scope.increment = function(increment) { 
    $scope.val = parseFloat(($scope.val + increment).toFixed(2)); 
};

，然後在html撥打：

<button ng-click="increment(-0.01)">-0.01</button> 
<button ng-click="increment(0.01)">0.01</button>

來源

2015-06-10 12:00:35

您好，感謝您的參考，我理解的參考，但我想申請你們的榜樣，不加或減我的按鈕。我寫錯了什麼？ http://jsbin.com/gijejo/2/edit?html,js,output –

奇怪的是，它不起作用，但檢查編輯更清潔的方式來解決它:) –

編輯答案刪除錯誤的一塊的代碼。請參閱http://stackoverflow.com/a/23725364/1933561以瞭解爲什麼parseFloat在範圍上不可用。 –

一（IMO髒）的解決辦法請注意0的變化，並在發生時將數字四捨五入爲2位數。

你只需要修改你的控制器如下：

app.controller("mainCtrl", function($scope) 
{ 
    $scope.val = 1.80; 
    $scope.$watch(
     function(scope) { 
     return scope.val; 
     }, 
     function(num) { 
     $scope.val = Math.round(num * 100)/100; 
     } 
); 
});

這樣，每當發生變更，您覆蓋與2位四捨五入值的值。沒有其他HTML和/或模板更改是必要的。

JS斌例如：http://jsbin.com/viyixofova/1/（只有第一個輸入已實施捨入）。

來源

2015-06-10 12:04:10 alesc

謝謝！它很髒但很有用:) –

-1

好感謝您的幫助，最後我用這個：http://jsbin.com/gijejo/9/edit

最後一個問題，有沒有辦法來統一由不輸入NG-模型的任何值的增量和減量功能，通過重複parseFloat值？

再次感謝

來源

2015-06-10 14:20:37

Angularjs輸入ng型號只有兩位小數或數字

回答

相關問題