Question

55

Add a prefix/suffix to value of input tag

rated 0 times [ 59] [ 4] / answers: 1 / hits: 30724 / 9 Years ago, wed, june 24, 2015, 12:00:00

I have this situation: I need to add quotes inside an input text field (html) without changing the value of the input. I'm working with angular so I use ngModel, it looks like this

<input ng-model=data type=text />

I want the input field to show whatever is in {{data}} but the variable data itself remains unchanged (no quotes).

I haven't found any css/Angular tricks yet... any ideas?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

bretd

Add To Favorites

Follow

Total Points: 6

Total Questions: 100

Total Answers: 97

Location: England

Member since Sun, May 21, 2023

1 Year ago

answered 9 Years ago reed · Accepted Answer

Using ng-model=data in <input type=text> binds the data with entire text field. This is not particularly useful in situations where you want only a portion of text(being displayed in text field) to get bind with the scope.

For instance, if you do

<input type=text value=prefixText {{name}} suffixText ng-model=name>

The input box will display whatever is in name(with no prefix/suffix text)

However, there's a workaround. Use ng-bind on the variable and mention prefix/suffix text separately in the value=... attribute.

<input type=text value=prefixText {{name}} suffixText ng-bind=name>

Here's the demo