Add prefix / suffix to input tag value

Question

I have this situation: I need to add quotation marks to the input text field (html) without changing the input value. I work with angular, so I use ngModel, it looks like

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

I want the input field to display "everything that is in {{data}} ", but the data of the variables themselves remains unchanged (without quotes).

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

Answer 1

Using ng-model="data" in <input type="text"> binds data to the entire text field. This is not particularly useful in situations where only part of the text is required (displayed in the text box) in order to get bound to the scope.

For example, if you do

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

In the input field everything that is in name will be displayed (without the text of the prefix / suffix)

However, there is a workaround. Use ng-bind for the variable and specify the prefix / suffix text separately in the value="..." attribute.

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

Here is a demo