向离子输入添加美元符号

Question

我目前有这个：

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

我真正喜欢的是在任何输入的前面添加一个$，这样当用户输入一个数字时，它旁边或里面会出现一个美元符号。我现在发现这是不可能的。在标准输入中，我将输入之前或之后放置在跨度或标签中以使其工作。

然而，如果使用Ion-list中的Ion-item，那么添加一个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