calculation in angularjs output fails with ng-model - javascript

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

Related

Apply parseFloat on ng-model

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">

AngularJS ui-mask Adding a MAX and MINIMUM for a currency

I am using the official AngularJS UI-Mask https://github.com/angular-ui/ui-mask and trying to figure out how I can create a mask for currency USD.
I want the user to be able to put $00.01 to like $9,000,000.00 or whatever the desired max is.
I currently have: <input type="text" ng-model="greeting" ui-mask="$99.99" class="form-control input-lg" style="width:50%" />
That limits me to $99...
Here is a live demo: http://plnkr.co/edit/5ErV11uGVxJFmD24K2jk?p=preview
You can use input number.
<input type="number" min="0.99" max="9000000.00" ng-model="greeting"
class="form-control input-lg" style="width:50%" />

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}}">

How to add attribute to HTML element using javascript

Using javascript (preferably not jquery) I'm trying to change the line:
<input type="number" name="price" required="" id="id_price">
into
<input type="number" name="price" required="" id="id_price" step="any">
I know the solution's got to be easy but I just can't crack it. Help would be much appreciated!!
As torazaburo suggests in the comment you can do it in one step with setAttribute() method
document.getElementById("id_price").setAttribute("step","any");
<input type="number" name="price" required="" id="id_price">
OR
First create the attribute and set the value. Then add it to the element..
var attr = document.createAttribute('step');
attr.value="any";
document.getElementById("id_price").setAttributeNode(attr);
<input type="number" name="price" required="" id="id_price">

Copy input value text and paste/add to another input value text?

I want to copy this input from page A and paste to page B
Let say this is Page A :
<input type="text" class="Name" id="cName" Value="Hey" readonly/>
<input type="number" class="Qty" id="cQty" Value="1" readonly/>
<input type="text" class="Price" id="cPrice" Value="10" readonly/><button class="" id="copy">Copy/?Add to Page B?</button>
This is Page B:
<ol><button class="" id="add">Add</button>
<li>
<input type="text" class="Name" id="pName" Value="" readonly/>
<input type="number" class="Qty" id="pQty" Value="" />
<input type="text" class="Price" id="pPrice" Value="" readonly/><button class="" id="cancel">Cancel</button>
</li><input type="text" class="Name" id="" Value="" readonly/>
<input type="number" class="Qty" id="tQty" Value="Total Quantity" readonly/>
<input type="text" class="Price" id="tPrice" Value="Total Price" readonly/></ol>
I read that I can't copy and paste, so is there another way of it? like adding Page A input text straight to Page B input text, like "add to shopping carts?"
Thanks for all the expert here.
If you have no option to use server-side programming, such as PHP, you could use the query string, or GET parameters.
In the form, add a method="GET" attribute:
<form action="b.html" method="GET">
<input type="text" name="serialNumber" />
<input type="submit" value="Submit" />
</form>
When they submit this form, the user will be directed to an address which includes the serialNumber (for example) value as a parameter. Something like:
http://www.example.com/display.html?serialNumber=XYZ
You should then be able to parse the query string - which will contain the serialNumber parameter value - from JavaScript, using the window.location.search value:
// from b.html
document.getElementById("write").innerHTML = window.location.search; // you will have to parse
// the query string to extract the
// parameter you need
See also JavaScript query string.
The alternative is to store the values in cookies when the form is submit and read them out of the cookies again once the b.html page loads.
See also How to use JavaScript to fill a form on another page.
You can take this value either by form post method or use browser cookies and very easy to implement.
And the methods varies as per your programming language.

Categories