Apply parseFloat on ng-model - javascript

I am trying to print Float value on the input field using ng-model. But it's not displaying. If I use value instead of ng-model then it's getting displayed.
Here's my code:
<input id="cost" name="cost" type="number" ng-model="parseFloat(cost_per_month)">
If I use value insted of ng-model:
<input id="cost" name="cost" type="number" value="cost_per_month">
Here's my controller:
$scope.selectedcost = parseFloat(orgprojects.cost_per_month);

You do not have to necessarily use parseFloat on the controller, you could use the number filter to display the model variable in the required format,
<input id="cost" name="cost" type="number" ng-model="cost_per_month | number:2">

Related

How to replace "undefined" with zero value in javascript or form to pass to spring-mvc controller?

I am creating with a mouse event two float values in a javascipt jquery function and pass these values via form to a spring mvc controller as parameters. It works fine when the values get actually created but when I do not create them, the form passes a string "undefined" and the whole thing crashes.
my javascript values:
$('#width').val(event.pageX);
$('#height').val(event.pageY);
my form:
<form:form modelAttribute="Float2" method="POST" action="getFloats">
<input type="hidden" id="width" name="width" value=width>
<input type="hidden" id="height" name="height" value=height>
<button type="submit">Save the floats</button>
Is there a possibility to change the "undefined" to zero so that the form always passes floats?
Well, one option is to create html input tags already with the default values:
<input type="hidden" id="width" name="width" value="0">
<input type="hidden" id="height" name="height" value="0">
Then alter this values with JS if you need, otherwise default "0" values will be submitted

Binding ng-model array to fixed number of textboxes

How do I bind an ng-model that is an array to a fixed number of textboxes?
Let's say I have three textboxes and they are all optional, how do you bind the ng-model to those textboxes?
<input type="text" name="optionalField[]">
<input type="text" name="optionalField[]">
<input type="text" name="optionalField[]">
You can type into any textbox (e.g. textboxes 2 and 3 only) and when you save it, it's just going to be optionalField: ['text2', 'text3'].
Where you place the text doesn't matter; what matters is the order of the textboxes. So when you show the view again, it's just going to be bound to the first and second textboxes. If you only typed on the textbox 3, it will be bound to textbox 1 and so on.
UPDATE:
Just used dfsq's answer and modified it to return a filtered array of values.
http://codepen.io/anon/pen/ozpxGq?editors=1011
In ng-repeat you can use $index
<input type="text" name="optionalField[]" ng-model="optionalField[$index]">
Like this:
<input type="text" name="optionalField[]" ng-model="optionalField[0]">
<input type="text" name="optionalField[]" ng-model="optionalField[1]">
<input type="text" name="optionalField[]" ng-model="optionalField[2]">

calculation in angularjs output fails with ng-model

I'm working on an angular project where i perform calculations on the page. In the textfield where i put the final results, when i get it an ng-model that answer fails to load. When i take out the ng-model, the answer appears.
But i want it working while it have an ng-model="total" because i will send the total value to the database. With the below script, it works
<input name="price" type="text" id="price" ng-model="price">
<input name="quantity" type="text" id="quantity"ng-model="price">
<input name="total" type="text" id="total" value="{{.price*quantity}}">
But with this
<input name="price" type="text" id="price" ng-model="price">
<input name="quantity" type="text" id="quantity"ng-model="price">
<input name="total" type="text" id="total" value="{{.price*quantity}}" ng-model="total">
it fails to works. The answer doesn't appear in the textbox
Try this instead:
<input name="price"
type="text"
ng-model="price" string-to-number>
<input name="quantity"
type="text"
ng-model="quantity" string-to-number>
<span>{{ price * quantity }}</span>
I'm not sure why you're trying to put the calculated value into the 3rd input, but if you are, you'll want to use ng-model-options to tell the total ngModel that it's to treat that value as a getter/setter - https://docs.angularjs.org/api/ng/directive/ngModelOptions
Also note the string-to-number directive. You're dealing with strings in the input. So in order for interpolation to work, you may need to add those.
edit
here is a working example of how I think you were trying to allow an override on the calculated value. You can enter another value in the total input and hit enter to see it working. This uses the ng-model-options - http://codepen.io/jusopi/pen/XKQzzv

for input type="number" how to set default value to 0

For a textbox that accept numbers as shown below, how can the default value be set to 0?
<input name="smtpPort" type="number" id="smtpPort" size="30" maxlength="50" class="input-full" tabindex="4" value="{{model.PortNumber}}">
Though the value in DB is null, it still shows 0 in textbox.
Any help would be appreciated.
HTML attribute to set a default value is value:
<input type="number" value="1">
You're setting this default value to null, and nothing (in HTML) can change it to zero (or anything else).
You must fix the value in your database, or in your template engine (something like {{model.PortNumber || 0}}).
At least, you can force your field to be filled with required attribute:
<input type="number" required value="">
<input name="smtpPort" type="number" id="smtpPort" size="30" maxlength="50" class="input-full" tabindex="4" value="{{model.PortNumber || 0}}">
I assume you're using AngularJS.
The correct way should be to fix the value before sending to template. However, if you still insist on doing it in frontend, you can also try using || operator in your AngularJS frontend.
<input name="smtpPort" type="number" id="smtpPort" size="30" maxlength="50" class="input-full" tabindex="4" value="{{model.PortNumber || 0}}">

currency format in text field through javascript

I want to make text field in currency format with 2 decimal place.
Problem is :- after currency format my value is saved first digit in db instead of full value.
Here is code:-
html:-
<?php $itemcost=$item->price;?>
<label for="item-price" class="required item-dollar">$</label>
<input type="text" class="form-control" required="required"
value="{{number_format($itemcost)}}" id="item-pricing"
name="price" placeholder="Item Price">
Please advise me any solution.
It is not clear if you are having difficulty saving currency to the database or displaying it
You need to store the value in a field that accepts decimals/floats (e.g. decimal(10,2)
You are also using number_format() without a second argument which defaults to no decimal places, you should use number_format($itemcost, 2) for two decimal places
<?php $itemcost=$item->price;?>
<label for="item-price" class="required item-dollar">$</label>
<input type="text" class="form-control" required="required" value="{{number_format($itemcost,2)}}" id="item-pricing" name="price" placeholder="Item Price">
http://php.net/number_format

Categories