Angular - 如何以百分比形式设置输入字段格式,但在编辑时删除百分比?

2023-11-26

我试图找到一种方法,在初始页面加载时以百分比(例如 97,52 %)显示 html 输入字段(通过角度服务获取到后端的数据,即可观察/订阅),但也有此输入字段松散,当我编辑它时(即引发 DOM(焦点)事件时),它是百分比格式。

格式数据绑定到模型。我们将模型字段称为 myModel.percentNumber,其中,percentNumber=1 表示“100 %”(0.69 表示“69 %”,或者 100 表示“10 000 %”)

因此,当我单击指示“97,52 %”的字段时,我希望它变为“97.52”,但模型中的数据绑定值应该是 0.9752,因为这是我需要存储的值。

该字段应使用 ngModel 进行绑定。

Note:这应该适用于国际化,所以我不能使用基于删除空格、替换“.”的“肮脏”解决方案。经过 ',' ... 在这里您可以看到我举了一个示例,其中格式化的百分比值应该有一个逗号作为小数分隔符和一个空格作为千​​位分隔符,但这取决于用户的本地化。


啊!与#2非常接近。 您可以在模板中完成这一切。 您可以使用 [value] 设置值作为输入 - 然后使用 (input) - 或者可能 (change) 将值转换回来。我认为你不能在 ngModel 中使用管道:

<input type="number" [value]="myModel.percentNumber * 100" (input)="myModel.percentNumber = $event.target.value / 100">

这种方式也没有文本转换或 dom 操作

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular - 如何以百分比形式设置输入字段格式,但在编辑时删除百分比? 的相关文章

随机推荐

  • IE8和localStorage支持[重复]

    这个问题在这里已经有答案了 我不确定IE8是否完全支持localStorage 但我用下面的方法来检测 function supports html5 storage try return localStorage in window wi
  • 如何重构所需的 else 子句?

    我有一个 C 方法 看起来有点像这样 bool Eval do some work if conditionA do some work if conditionB do some work if conditionC do some wo
  • getopts 的可选选项参数

    while getopts hd R arg do case arg in h echo usage d dir OPTARG R if OPTARG 0 9 then level OPTARG else level 1 fi echo W
  • System.Web.UI 在控制台应用程序中不可用?

    我正在尝试编写一个快速控制台应用程序 将数据输出到 HTML 文件 但是我在访问 System Web UI 命名空间时遇到问题 将 System Web 添加到我的引用中会在解决方案资源管理器中的引用名称顶部放置一个警告图标 并且 Sys
  • SharedElement和自定义EnterTransition导致内存泄漏

    拥有共享元素动画和自定义输入动画会导致活动泄漏 知道可能是什么原因吗 09 21 16 19 31 007 28269 31066 com sample android D LeakCanary com feeln android acti
  • Java Hibernate 映射异常! (无法确定类型:java.util.Map)

    我创建了一个名为 Movie 的类 其中包含以下字段 Id GeneratedValue private Long id private String name ElementCollection targetClass String cl
  • 递归解析 JSON

    我有一个使用 Python 创建的大型 JSON 对象 现在需要在网页上显示该信息 我的问题是它的大小 里面有嵌套的数组和对象 并且在点上有几层深 我编写了一个极其不优雅 且有缺陷 的 JavaScript 函数来提取数据 但这对我来说似乎
  • 在运行时更改区域设置时刷新(重新创建)返回堆栈中的活动

    我有一个活动说ActivityMain从这个活动我转移到另一个名为ActivitySettings在设置活动中 我通过单击按钮更改应用程序区域设置 并使用重新创建实现了当前活动中所需的更改 但是当我按回时 我的 ActivityMain 将
  • 如何使用 LOAD DATA INFILE 将选定的列从 CSV 文件插入到 MySQL 数据库

    我有一个包含 10 列的 CSV 文件 我只想从该文件中选择一些列并使用以下命令将它们加载到 MySQL 数据库中LOAD DATA INFILE命令 将数据加载到 MySQL 中的表中并指定列 LOAD DATA LOCAL INFILE
  • 将Xcode项目推送到GitHub时的身份验证问题

    当我想通过 Xcode 将项目推送到 GitHub 时遇到了问题 注意 我这里说的不是终端 我必须为我团队中的艺术家设置 Xcode 环境 终端对他不起作用 我一开始尝试使用 HTTPS 地址 https github com zeroli
  • 识别应用程序是否存在,如果不存在则转到 Play 商店

    有点傻 我想知道的是 如果设备上不存在应用程序 是否可以进入游戏商店下载它 我知道我需要将此代码放入 Intent i getPackageManager getLaunchIntentForPackage com package addr
  • Safari 错误 kCFErrorDomainWinSock:10054

    我在 Windows 上安装了 safari 版本 5 1 7 并在 https windows 服务器上托管了 js 文件 该网站工作正常 但我无法在 Safari 浏览器中查看 javascript 文件 现在问题已经解决了 该问题与
  • Android Eclipse 模拟器问题:将 WVGA(hdpi) 作为 mdpi 屏幕运行

    我遇到的问题是 当我运行 FWVGA 或 WVGA 大小的模拟器时 它有时会以 MDPI 大小而不是 HDPI 运行 这是一个带图片的例子 http wonton games blogspot com 2010 06 emulator pr
  • 单页应用程序和 RESTful API

    真正的 RESTful API 利用超媒体 以便客户端仅依赖服务器提供的动态超媒体来浏览应用程序 该概念称为HATEOAS 这个概念很容易适用于 Web 应用程序 但如何将其应用到单页应用程序 因为 SPA 通常在内部管理其状态 就导航而言
  • 为什么 C++ 标准库中没有 std::thread_pool ?

    我觉得奇怪的是 尽管有大量的多线程构造 但该标准却缺少线程池类 什么原因可能会阻止委员会将其添加到标准中 C 与 C 一样 旨在为程序员提供尽可能多的控制权 C 中的几乎所有内容都是一个非常简单的包装器 这使程序员可以自由地实现他们想要的任
  • Oracle MIN 作为分析函数 - ORDER BY 的奇怪行为?

    这种特殊情况是从一个示例中提炼出来的 在该示例中 程序员假设对于两次装运到罐车的货物 第 1 行将首先装载 我更正了这个问题 以允许以任何顺序执行加载 但是 我发现MIN OVER PARTITION BY 允许ORDER BY在 Orac
  • 为什么 C++ 不能用 LR(1) 解析器解析?

    我正在阅读有关解析器和解析器生成器的内容 并在维基百科的 LR 解析页面中找到了此声明 许多编程语言都可以使用 LR 解析器的某些变体进行解析 一个值得注意的例外是 C 为什么会这样呢 C 的什么特殊属性导致它无法用 LR 解析器进行解析
  • 获取一个 python docker 容器与 redis docker 容器交互

    我对 docker redis 和任何类型的网络都很陌生 至少我知道 python 首先 我已经弄清楚如何获取 redis docker 映像并在 docker 容器中运行它 docker run name some redis d red
  • SSRS网页错误状态代码500

    已经部署了许多引用相同视图的报表部分 但是其中一个无法在服务器上运行 我认为这可能是由于参数到位 其中包含各种字符 这是我收到的错误消息 有谁对如何解决这个问题有任何建议 Webpage error details User Agent M
  • Angular - 如何以百分比形式设置输入字段格式,但在编辑时删除百分比?

    我试图找到一种方法 在初始页面加载时以百分比 例如 97 52 显示 html 输入字段 通过角度服务获取到后端的数据 即可观察 订阅 但也有此输入字段松散 当我编辑它时 即引发 DOM 焦点 事件时 它是百分比格式 格式数据绑定到模型 我