Aggiungere un prefisso/suffisso al valore del tag di input

Question

Ho questa situazione: ho bisogno di aggiungere virgolette all'interno di un campo di testo di input (html) senza modificare il valore dell'input. Sto lavorando con angolare per cui uso ngModel, sembra che questo

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

Voglio che il campo di input per mostrare "tutto ciò che è in {{data}}" ma i dati variabili stesso rimane invariato (senza virgolette).

Non ho ancora trovato css/trucchi angolari ... qualche idea?

Answer 1

Utilizzando ng-model="data" nel <input type="text"> lega il data con tutto il campo di testo. Questo non è particolarmente utile in situazioni in cui si desidera solo una porzione di testo (visualizzata nel campo di testo) per ottenere il binding con l'ambito.

Per esempio, se si fa

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

La casella di inserimento visualizzerà ciò che è in name (senza testo prefisso/suffisso)

Tuttavia, c'è una soluzione. Utilizzare ng-bind sulla variabile e pronunciare il prefisso/suffisso del testo separatamente nell'attributo value="...".

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

Ecco il demo