向离子输入添加美元符号

Question

我目前有这个：

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

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

但是，对于离子列表中的离子项目，添加跨度似乎会破坏它，我不确定如何使用 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 类只设置opacity: 0，因此您仍然可以使用ion-item 中的行，而.offset-y-32 将<p> 文本向上移动32 个像素。

这是screen shot of the form