为输入标签的值添加前缀/后缀答案

【问题标题】：Add a prefix/suffix to value of input tag为输入标签的值添加前缀/后缀
【发布时间】：2021-01-06 22:59:18
【问题描述】：

我有这种情况：我需要在输入文本字段 (html) 中添加引号而不更改输入的值。我正在使用 Angular，所以我使用 ngModel，它看起来像这样

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

我希望输入字段显示“{{data}} 中的任何内容”，但变量数据本身保持不变（无引号）。

我还没有找到任何 css/Angular 技巧……有什么想法吗？

【问题讨论】：

标签： javascript html css angularjs

【解决方案1】：

在<input type="text"> 中使用ng-model="data" 将data 绑定到整个文本字段。在您只希望部分文本（显示在文本字段中）与范围绑定的情况下，这并不是特别有用。

例如，如果你这样做

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

输入框将显示name中的任何内容（没有前缀/后缀文本）

但是，有一个解决方法。在变量上使用ng-bind，并在value="..." 属性中分别提及前缀/后缀文本。

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

这是demo

【讨论】：

有没有办法让 prefixText suffixText 包围我正在输入的文本？
提供您输入的第一个文本框以让用户更改 name 并在第二个文本框中查看其效果
我想要全部合二为一...即，在我键入文本时，前/后缀应该围绕文本。不改变 {{data}}
@NLN...这太棒了！

【解决方案2】：

你可以试试这个

<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

【讨论】：

问题是关于 AngularJS (v1) 而你的答案是关于 Angular (v2+) 的演示链接也被破坏了。
问题中没有提到角度版本无论如何它适用于 Angular 2+
标签提到它是因为它被标记了 angularjs。而且您显然使用了为 Angular (v2+) 创建的 Material 包，所以不，您的答案将不起作用。
谢谢你，@RizwanAli。这是专门针对 Angular 12 的 Google 搜索结果，对我很有帮助（尽管问题是针对 AngularJS v1.x）。