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
Related
I have the following input
<input
[(ngModel)]="myInput"
mask="00-0000-0000||00-00000-0000"
type="text"
>
and I would like to initialize it with a certain value. Let's say 12-12345-1234.
This doesn't work since I only see 12-1234-5123 (The last digit is cut out of the html input and the shortest possibble mask is being used).
I would like to be able to initialize my input with any valid value and see the correct mask applied to it.
To setup a DOM initial Value, you can use the value attribute on the HTML template:
<input type="text" value="any-value-here">
The mask you are trying to use is a production of DOM manipulation logic. It will be achived by running JavaScript code, which modifies the DOM, and depending on the framework you use, or the lib you create the input mask effect, will always overwrite that 'initial' value.
In you case, using [(ngModel)] is not a strict initialization: it's already a value binding "event" made by angular as far as I know. To test your logic, I think it would be a better approach to create tests, or add the mask dynamically to the field if possible.
I have a textarea field like this :
<textarea id="user_about" maxlength="500" name="about"
ng-model="foo.bar"></textarea>
Now, using this a user an update his info - problem is i need to escape html so stuff like
$amp;
doesnt show, but instead i get a normal &.
I tried using ng-bind-html, however i need two way data binding,
What would be the best way to do this ?
The browser does the best job converting html entities to text
Before you pass data to view can convert to text by doing:
$scope.foo.bar = angular.element('<div>').html($scope.foo.bar).text()
I have an input inside my form, it holds a value price of a product,
at the beginning the input text placeholder is '$':
<input [placeholder]="$"/>
Now when ever I write something I want the '$' letter of the place holder to move with the cursor but inside the place holder and not as a text, for example when I write 123 it will show it like this 123$, what I did is at each change inside the input I add the letter '$' at the end of the input text but that it's not practical, I want it the letter '$' to be as a placeholder in the background and not part of the actual price.
Any help is appreciated.
Seems to me you'd create a filter (or a "pipe" in Angular 2 parlance). Your scope value can be modified in the view using a template without changing the original value.
https://angular.io/docs/ts/latest/guide/pipes.html
The placeholder attribute specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format).
The short hint is displayed in the input field before the user enters a value and disapear as soon as the user enters a value.
What you want to do is to format the value that can't be achived with placehoder.
I'll go with a directive allowing you to configure the currency to display and where to display it. Just like TestMask Lib
Since the "$" symbol is not meant to be part of the text and is used for guidance for the user, wouldn't you be better of implement this as something like:
<label>$</label><input type="text" placeholder="Enter value in USD" />
This way the $ will remain constant in front of the entered value.
I'm using angular and i want to show data to users with html input type="number"
<input type="number" step="0.001" class="form-control" style="width: 75px" ng-model="product.price" />
I always want to show 3 decimal places. But The source where the data comes, has sometimes
value:1.01 -> i need 1.010
value:1.004 -> i need 1.004
value:1 -> i need 1.000
I've tried .toFixed(3), but this returns a string, which is not what i need( cant show that in input type number)
Tried to parseFloat(mynumber.toFixed(3)), but this will again remove the extra zeroes.
Maybe there's a way to mask the input, show some extra decimals if not present ?
Angular filters do not work on input elements. Here is an example of a directive that adds number formatting to an input using the ngModel $parsers and $formatters.
You can use the number Angular filter for such a purpose: https://docs.angularjs.org/api/ng/filter/number
Still without an answer. As far as i've read it's a problem within the community, that the extra zeroes get removed , if input type=number.
I'd like to be able to replace a standard HTML <TEXTAREA> input with insertable <INPUT> text inputs. By insertable, I mean having two TEXT form inputs (name, role) and an "Add" button after it to add a new name/role after this one if desired.
Ideally I'd have 'role' in an HTML <SELECT> input (drawn from my database) but I'm not really asking about that now :)
Also (again ideally) I'd like to be able to read these value in and parse them to look the same as when they were entered, i.e. with the text fields and pulldowns.
My database stores all of this in a single MySql 'text' which right now I have to enter manually in the format :
name - role ; name2 - role2 ; name3 - role3
and my script (that creates XML from this) explodes the "name" into two nodes explode'd by a "space-dash-space" and separates each node when it reads a semicolon.
Edited to show that my main problem is how to replace the plain HTML <textarea> with one or more <INPUT> fields and serialize them so they can be stored in my MySQL text record.
You can save the data as serialized php or JSON encoded string. That way, you can keep the object structure in the TEXT field.
Hope that helps.
Here was my solution: to use jQuery's replaceWith, replacing the TEXTAREA's tag with a bunch of <INPUT TYPE=TEXT name=myVar[]> so that they were stored in an array, and implode/explode the values as I needed them.