We Keep Coding

How to format a Number in AngularJs?

I want to format a number from 10000 to 10,000.00 is there any way to do it in HTML alone(without controller file) with ng-Model directive?
I tried to do it in controller file with a logic and bind it to HTML file. But the controller logic always return a number in "10,000.00" String format. Is there any way to convert "10,000.00"(String) to 10,000.00 (number) and bind it to HTML?...(I want 10,000.00 in type number).
My .html file is something like this
div ng-repeat="array in arrayList"><input type="text" ng-Model="array.amount" </div
and my controller file is something like this
var arrayList=[{"amount":3000},{"amount":4000},{"amount":5000}];
(I apologize for not formatting the html file properly)
Thanks

Explanation:
Use type="text" and pattern validation like
pattern="[0-9]+([\.,][0-9]+)*" to limit what the user may enter while
automatically formatting the value as you do in your example.
Put an overlay on top of the input field that renders the numbers how
you want and still allows the user to use the custom type="number"
input controls, like demonstrated here.
The latter solution uses an additional <label> tag that contains the current value and is hidden via CSS when you focus the input field.
In input type: "number" case ngModel type is number and in input type:"text", ngModel is string
Demo of one use-case: JSFiddle

HTML5: additional chars in input with type="number"

In our app, we have many inputs that are used to fill in school grades. Till now we had
<input type="text" name="mark">
As we're trying to use new features of HTML5, we changed it to
<input type="number" name="mark">
so on mobiles/tablets we have interface with only numbers. And there's the case. It is possible to place in input grades like "5+" and others (for example some two-letter shortcuts "ab" and other). It's customizable by users.
Is there any way to extend input to treat numbers and all that chars as valid WITH extending Android/iOS keyboard layout to only that?
EDIT:
Don't forget that i want to know if i can extend keyboard layout on mobile. If it's not possible, i'll fall back to text with some validation.

I believe you can use the pattern attribute for what you described:
A regular expression that the control's value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is text, search, tel, url or email; otherwise it is ignored. The regular expression language is the same as JavaScript's. The pattern is not surrounded by forward slashes.
https://developer.mozilla.org/en/docs/Web/HTML/Element/Input
e.g. <input type="text" name="HasAPattern" pattern="[0-9A-Z]{3}" title="Enter 3 characters">
will result in an input element that allows only 3 characters.
Unfortunately, custom keys are not allowable I believe, so you would have to use a text type that has an added numeric pattern with the attribute above.
Custom keyboards would have to be used for non-standard keyboard layouts/input buttons.

You would probably want just normal text field and use something like JQuery Validate to limit the input and throw warnings if a user enters incorrect data.
Another option would be to trow all possible option into a HTML select tag.
JQuery Validate plugin: http://jqueryvalidation.org/

you can use
<input type="text" name="mark" pattern="[a-z0-9]{2}">
You can specify your regular expression in the pattern and have any character whitelisted
For having 50+ kind of input use the following
<input type="text" name="mark" pattern="[0-9]{2}[+]?">

You could simply use,
<input type="tel" name="mark">
This would do it.

input type=number not possible to insert negative numbers on mobile phone

I'm testing my app on my mobile phone (samsung galaxy note II with chrome) and I have a problem with the numeric input fields.
In my app these fields can accept negative numbers, and on the browser it's all fine as I have the - button and also the arrow sliders (from html5) for choosing the number.
On the phone though the sliders are not rendered, and the browser recognise the input type=number, and just renders a simplified numeric keyboard, which doesn't contain the - sign, so I didn't see a way to insert the negative number I wish.
My app uses twitter bootstrap 2.3.2 with jquery, I'm not sure how to solve this problem.
here's the code for one of my input fields that work fine on my computer, but can't use them properly on my phone:
<input class="input-mini" data-type="distance_price" id="distance" label="false" name="distance" step="0.1" type="number" max="-0.1">
in the image you can see how the field in red is marked as wrong because it needs to be negative, but my keyboard doesn't let me insert symbols. including the - sign.
any clue?

The issue is specific to Samsung custom keyboard - hooray to vendors who think they're smarter than everyone. Here is another example of this issue at work

In short, there's no way to make the minus sign show up on Samsung Android numeric inputs. Here are a few workarounds I've run across:
1) Google Keyboard
The user can install a different keyboard (like Google Keyboard). Obviously not ideal to have people install something though.
2) Negate Button
As #Cris already suggested, add a button which will negate the value. If you've got the screen real estate then great.
3) Double Dot Trick
We ended up with a fairly ugly workaround where the user can press . twice and it will negate the number. Totally non-discoverable but an extra button wasn't an option for us.
https://gist.github.com/bendytree/936f6b9b4c0e10138b7e9158b5fd05d9

Make an extra input field. A "sign" checkbox, selecting natural or negative integers.
Then hook the onchange event of the checkbox so that you update the number view to reflect the chosen sign.

If you use the value attribute (value="-0.1") to load an initial negative value then you will have the minus sign pre-loaded for you.
<input class="input-mini" data-type="distance_price" id="distance" label="false" name="distance" step="0.1" type="number" max="-0.1" value="-1">

If you returned here because the Double Dot Trick from above stopped working... It seems an update to how input type="number" fields are handled keeps the second "dot" from even registering as a keystroke stopping the Double Dot from working. In my case, I changed the test line in the JS to
if (lastkey === "." && (key === "." || e.originalEvent.inputType == "deleteContentBackward")){
to create the equally hacky "Dot Backspace Trick"

iPhone adds commas to input number field due to JavaScript

We have an order form which takes credit cards from mobile browsers: <input type="number" id="txtCCNumber" />
Also in addition to that we have a JavaScript which removes any non-integer characters that are inserted into the field:
$('input#txtCCNumber').keyup(function(e)
{
var ccnum = $(this).val();
$(this).val(ccnum.replace(/[^\d]/g, ''));
});
However we just realized that it appears that when people using an iPhone try to put their credit card in, iPhone automatically adds a comma every 3 numbers (because of the JavaScript).
Does anybody know a way to fix this JavaScript so it works?
I do not want to use type="tel". That is not a solution in this case.

Personally, I don't think credit card numbers are an appropriate use of input type="number". According to the spec:
The input element with a type attribute whose value is "number" represents a precise control for setting the element’s value to a string representing a number.
Credit card "numbers" are strings of digits, but they don't identify a particular numeric value, and it wouldn't make sense for a user to enter a credit card number using the up and down arrows that some browsers attach to the input field. Your best bet is simply to use input type="text".
Also, attaching that JavaScript to the keyup event is going to annoy people like me who want to enter their credit card number with separators because it's easier to spot check. Just let people enter their card number however they like and normalize it later.

I don't see a reason why you're using type="number" for a Credit Card number field since you're anyways removing non integer values using JS. Using type="text" would be apt here.

I created a fiddle and tested this on my iphone and it works properly.
http://jsfiddle.net/MH8gj/

How do I use JavaScript for number formatting?

I want to use JavaScript to restrict input on a text box to currency number formatting. For example:
<input type="text" value="2,500.00" name="rate" />
As given above, the text box should accept only numbers, commas and a period.
But, after the period it should accept two digits after numbers.
How do I accomplish this? Please clarify.
Gnaniyar Zubair

parseFloat can convert a string to a float and toFixed can set how many decimal places to keep.
function numToCurrency(num){
return parseFloat(num).toFixed(2);
}
numToCurrency("4.2334546") // returns 4.23

If you want to do validation for your textbox, you can use Regular Expressions. If you want to restrict the input from the user, you can trap the keystrokes and filter out the ones you want them to enter using the onKeyDown event of the textbox.

These jQuery plugins can help..
http://www.texotela.co.uk/code/jquery/numeric/
http://plugins.jquery.com/project/aphanumeric

You could use a jQuery's plugin called Alphanumeric
jQuery AlphaNumeric is a javascript
control plugin that allows you to
limit what characters a user can enter
on textboxes or textareas. Have fun.