在离子输入中添加美元符号

Question

我目前有这个：

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

我真正想要的是在任何输入的前面添加一个 $，这样当用户输入一个数字时，它旁边或里面会出现一个美元符号。我目前发现这是不可能的。在标准输入中，我会将 before 或 in a span 或 label 放在输入之前以使其工作。

然而，对于 Ion 列表中的 Ion 项目，添加跨度似乎会破坏它，而且我不确定如何使用 scss 在之后添加它。头爆炸的东西。

我试过：

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

心血来潮，希望能奏效。它没有。

有人以前遇到过这个问题并有解决方案吗？

谢谢

Answer 1

有趣的问题。以下应该有效，因为在实践中我相信 <ion-input> 在 DOM.

中被转换为标准 HTML5 输入

input[type=number]:before {
    content: "$";
}

Answer 2

这是一个很好的问题，@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 class 只是设置 opacity: 0 所以你仍然可以使用 ion-item 中的行，而 .offset-y-32 移动 <p> 文本向上 32 像素。

这是一个screen shot of the form

在离子输入中添加美元符号

Adding a dollar sign to an ion-input

input

sass

ionic-framework

ionic2