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

向离子输入添加美元符号

2 个答案: