Question

使用SAPUI5 xml视图，我想在输入字段中添加格式化程序。根据用户输入的内容（数字），我希望看到附加值的尾随％。

so if userinput value = "99" ---> "99%" or ".5" ---> "50%"

查看数据类型，我不确定是否存在将输入值格式化为百分比的“开箱即用”解决方案。有什么想法可以实现吗？

 <Input
    id="percentGrowth"
    type="Text"
    value="{path:'inputModel>/myPath', type:'sap.ui.model.type.Float', contraints: {maximum : 1}}"   >
</Input>

Answer 1

您应该使用格式化程序 Formatter sapui5

例如

   <Input
    id="percentGrowth"
    type="Text"
    value="{path:'inputModel>/myPath', 
    type:'sap.ui.model.type.Float', 
    contraints: {maximum : 1}, 
    formatter:'.myFormatter'}"   >
</Input>

然后在控制器中添加功能

myController.prototype.myFormatter(value){
   return  value + "%";
}

有关详细信息，请参阅此SDN

链接中的示例

Answer 2

您可以使用 SAPUI5 百分比格式器NumberFormat.getPercentInstance().format()：

   <Input
    id="percentGrowth"
    type="Text"
    value="{path:'inputModel>/myPath', 
    type:'sap.ui.model.type.Float', 
    contraints: {maximum : 1}, 
    formatter:'.formatPercentage'}"   >
</Input>

在控制器中：

sap.ui.define([
    "sap/ui/core/format/NumberFormat"
],function (NumberFormat) {
          formatPercentage: (number) => {
                return NumberFormat.getPercentInstance().format(number);
            }
    })

Answer 3

在使用表达式绑定或格式化程序时，永远不要忘记将 data-sap-ui-xx-bindingSyntax="complex" 放在引导脚本中。

或者更好的使用：data-sap-ui-compatVersion="edge"

如何将输入字段格式化为百分比值？

3 个答案: