AngularJS - 如何强制范围输入的 ng 模型为空？

Question

这是一个过滤器，两个输入同时使用相同的 ng-model：

<!-- Number input --> 
<input
type="number"
maxlength="5"
step="0.25"
min="-10"
max="10"
placeholder="0.00"
ng-model="sphere">

<!-- Range Input -->
<input type="range" ng-model="sphere" min="-10" max="10" step="0.25">

目标：

• 最初显示占位符而不是值，该值由范围输入设置。

问题：

• 范围输入不能设置为 Null。

可能的解决方案

• 激活范围输入，仅当聚焦任一值从 Null 更改为有效数字值时，它才会对 ng-model 变量产生影响。

这张图显示了它是如何设置的，其中白条是辅助范围输入

我正在寻找任何可能导致解决方案的提示，我相信，如果有可能实现，那将是通过在更改时激活范围输入。但是，'disabled' 和 'readonly' 不这样做，还能做什么？

我试图让它以这种方式工作，一旦我想实施 ng-masks，占位符在这种情况下很重要。

Answer 1

您可以将input 元素包装在form 中，为输入命名，然后您可以检查input 的状态（例如formName.inputName.$touched）。

根据input 元素的状态，您可以显示/隐藏不同的内容。所以该值只会在input 被触摸时显示。