Angular data binding returning NaN when value is zero

Question

I'm doing some simple data binding like so:

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

However, initially, when the text input is empty it returns NaN.

How can I prevent this from happening with Angular?

Answer 1

You can try this:

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

HTML text inputs are text by definition. the added + will convert it to an number prior to being used.