Добавление знака доллара к ионному вводу

В настоящее время у меня есть это:

<ion-item>
    <ion-label sale floating>Sale Price< /ion-label>
    <ion-input type="number" clearInput placeholder="$">< /ion-input>
</ion-item>

Что бы я действительно хотел, так это добавить $ перед любым вводом, чтобы, когда пользователь вводит число, оно появлялось со знаком доллара рядом или внутри него. Я нахожу это невозможным в настоящее время. В стандартном вводе я бы поместил перед или в диапазон или метку, предшествующую вводу, чтобы заставить его работать.

Однако с элементом Ion в списке Ion кажется, что добавление диапазона нарушает его, и я не уверен, как с помощью scss добавить его после. Голова взрывается.

Я пробовал:

ion-label[sale]:before {
    content: "$";
}

По прихоти, в надежде, что это сработает. Это не.

Кто-нибудь испытывает это раньше и имеет решение?

Спасибо


ionic-framework input sass ionic2
person David G    schedule 05.08.2016    source источник

Ответы (2)


arrow_upward
7
arrow_downward

Интересный вопрос. Следующее должно работать, потому что на практике я считаю, что <ion-input> преобразуется в стандартный ввод HTML5 в DOM.

input[type=number]:before {
    content: "$";
}
person Lightbeard    schedule 06.08.2016
comment
Ваш ответ помог мне решить аналогичную проблему. Однако разве это не должно быть ::before? - person Afshar; 16.01.2021
comment
Это помогло мне, но для меня это было: ion-input[type=number]::before { content: "$"; } теперь я просто пытаюсь скрыть его, пока ввод не находится в фокусе - person fromage9747; 08.02.2021
comment
так же, как FYI, я получил то, что хотел, выполнив ion-input[type=number]:focus-within::before { content: "$"; } Это показывает знак доллара только тогда, когда ввод находится в фокусе. идеально подходит, когда вы используете плавающую этикетку - person fromage9747; 08.02.2021

arrow_upward
3
arrow_downward

Это отличный вопрос, и ответа @Lightbeard должно быть достаточно для большинства случаев использования. Я хочу поделиться альтернативным решением для этого, используя Angular Pipes.

@Pipe({name: 'roundDollars'})
export class RoundDollarsPipe implements PipeTransform {
  transform(value: any) {
    return _.isNumber(value) ? "$"+Math.round(value) : 'Price Error';
  }
}

@Pipe({name: 'roundCents'})
export class RoundCentsPipe implements PipeTransform {
  transform(value: any) {
    return _.isNumber(value) ? "$"+value.toFixed(2) : 'Price Error';
  }
}

В шаблоне вы можете реализовать это, если используете элемент управления формы:

<ion-item>
  <ion-label sale floating>Sale Price< /ion-label>
  <ion-input type="number" formControlName="salePrice" value="{{ formControl.get('salePrice').value | roundDollars }}">< /ion-input>
</ion-item>

Недостатком этого является то, что перед фактическим значением, отправленным в вашей форме, будет стоять «$». Я храню свои данные в виде числа, а не строки, поэтому я помещаю символ «$» на отключенный ввод ниже в форме, чтобы отобразить общее количество нескольких вводов.

Это означает, что фактический ввод, в который пользователь вводит, не показывает «$», но отображается ниже в форме.

Мой производственный шаблон выглядит так:

<ion-item>
  <ion-label floating>Monthly Total:</ion-label>
  <ion-input [disabled]="true" class="invisible" type="number" formControlName="monthlyFee"></ion-input>
</ion-item>
<p class="offset-y-32">{{ detailsForm.get('monthlyFee').value | roundDollars }}</p>

Мой класс .invisible просто устанавливает opacity: 0, так что вы все еще можете использовать строку из ion-item, а .offset-y-32 перемещает текст <p> вверх на 32 пикселя.

Вот скриншот формы

person Ben Hulan    schedule 05.03.2019
comment
Это выглядит именно так, как я хочу. Откуда берется подчеркивание? Какие библиотечные изделия вы импортируете? Лодаш? - person fromage9747; 08.02.2021