角數據綁定返回NaN當值爲零

Question

我做一些簡單的數據，像這樣綁定：

<input type="text" class="form-control" model="amount"> 
<label>Your amount is {{amount * 10 }}</label> 

然而，最初，當文本輸入爲空，返回NaN。

如何防止Angular發生這種情況？

Answer 1

你可以試試這個：

<input type="text" class="form-control" model="amount"> 
<label>Your amount is {{ (+amount) * 10 }}</label> 

HTML文本輸入被定義文本。添加的+會在使用之前將其轉換爲數字。

Answer 2

使用三元運算符來檢查下面的tempalte中的isNaN。

<input type="text" class="form-control" model="amount"> 
<label>Your amount is {{ (!isNaN(amount)) ? (amount * 10) : '' }}</label>