8

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?

2 Answers 2

9

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

3
  • is there a way to make the prefixText suffixText surround the text where I'm typing it?
    – Uria Mor
    Commented Jun 24, 2015 at 8:31
  • The first text-box where you are typing is provided to let user change the name and see its effect in second text-box
    – nalinc
    Commented Jun 24, 2015 at 10:23
  • 1
    I want all in one... i.e the pre/suffixes should surround the text as I type it. without changing {{data}}
    – Uria Mor
    Commented Jun 24, 2015 at 10:40
-2

You can try this

<form class="example-form">
  <mat-form-field class="example-full-width">
    <mat-label>Telephone</mat-label>
    <span matPrefix>+1 &nbsp;</span>
    <input type="tel" matInput placeholder="555-555-1234">
    <mat-icon matSuffix>mode_edit</mat-icon>
  </mat-form-field>
</form>

Demo

4
  • 1
    The question is about AngularJS (v1) and your answer is for Angular (v2+) also the demo link is broken. Commented Jan 6, 2021 at 15:47
  • In Question haven't mention the angular version Anyway it will work for Angular 2+
    – Rizwan Ali
    Commented Jan 6, 2021 at 20:58
  • 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. Commented Jan 6, 2021 at 22:24
  • 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).
    – MarkMYoung
    Commented Oct 10, 2021 at 21:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.