Dodaj prefiks/sufiks do wartości znacznika wejściowego

Question

Mam taką sytuację: muszę wstawić cudzysłowy wewnątrz pola tekstowego wejściowego (html) bez zmiany wartości wejścia. Pracuję z kanciasty więc używam ngModel, wygląda to

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

chcę pole wprowadzania, aby wyświetlić „co jest w {{data}}”, ale same dane zmienna pozostaje bez zmian (bez cudzysłowów).

Nie znalazłem jeszcze żadnych css/Angular Tricks ... żadnych pomysłów?

Answer 1

Korzystanie ng-model="data" w <input type="text"> wiąże data z całego pola tekstowego. Nie jest to szczególnie przydatne w sytuacjach, w których chcesz tylko część tekstu (wyświetlaną w polu tekstowym), aby uzyskać powiązanie z zakresem.

Na przykład, jeśli nie

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

polu tekstowym wyświetli co jest w name (bez tekstu przedrostek/przyrostek)

Jednakże istnieje obejście. Użyj zmiennej o wartości ng-bind i podaj tekst przedrostka/przyrostka oddzielnie w atrybucie value="...".

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

Oto demo