Add a prefix/suffix to value of input tag

Question

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?

Solution

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

Comments

[Uria Mor]

is there a way to make the prefixText suffixText surround the text where I'm typing it?

[nalinc]

The first text-box where you are typing is provided to let user change the name and see its effect in second text-box

[Uria Mor]

I want all in one... i.e the pre/suffixes should surround the text as I type it. without changing {{data}}

[Sabyasachi]

@NLN...This is just awesome!

[NoNameProvided]

The question is about AngularJS (v1) and your answer is for Angular (v2+) also the demo link is broken.

[Rizwan Ali]

In Question haven't mention the angular version Anyway it will work for Angular 2+

[NoNameProvided]

The tag mentions it because it's tagged with angularjs. And you clearly use the Material package created for Angular (v2+) so no, your answer won't work.

[MarkMYoung]

Thank you, @RizwanAli. This was a Google search result specifically for Angular 12 and was helpful to me (despite the question being for AngularJS v1.x).