为输入标记的值添加前缀/后缀

Add a prefix/suffix to value of input tag

本文关键字：添加 加前缀 后缀 输入      更新时间：2023-09-26

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

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

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

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

在<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">

这是的演示

你可以试试这个

<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>

演示

相关文章：