Question

我在角度1中有2个相关输入是类型编号，另一个是类型文本。

它们都显示相同的值，唯一的区别是类型文本输入显示为货币格式化的类型编号输入的值。

在任何给定时间只显示其中一个。我想要的行为是最初显示文本输入，然后在单击事件上隐藏文本输入并显示数字输入。类似地，当数字输入上发生模糊事件时，隐藏数字输入并显示文本输入。

这个标记看起来像这样：

  <div>
    <input type="number" ng-model="aValue" ng-blur="hideMeAndShowInputBelow">
    <input type="text" ng-value="aValue | currency:'': '0'" ng-click="hideMeAndShowAndFocusInputAbove" readonly="readonly">
  </div>

我知道我可以添加额外的属性来实现这个功能，但对于Angular来说这是一个相对较新的东西，感觉就像是一种可能是优雅解决方案的东西。

非常感谢任何帮助。

Answer 1

您可以在ng-blur / ng-click中指定变量，并根据变量值隐藏/显示输入。

<div>
  <input type="number" ng-model="aValue" ng-show="showNumber" ng-blur="showNumber = false">
  <input type="text" ng-value="aValue | currency:'': '0'" ng-show="!showNumber" ng-click="showNumber = true" readonly="readonly">
</div>

在这里检查一下：

https://plnkr.co/edit/yMFiXWuUF1R9BPGr2usT?p=preview

或者，如果这是您在应用程序周围多次使用的组件，则可以创建一个实现相同功能的自定义指令，从而避免大量代码重复等。

Answer 2

试试这样的东西

<div ng-app="myApp" ng-controller="myCtrl">
      <button class="btn btn-success" type="text" ng-model="firstName" ng-show="display" ng-click="display=!display"> BUTTON 1</button>
      <br />
      <button class="btn btn-warning" ng-click="display=!display" ng-model="lastName" ng-show="!display"> BUTTON 2
    </button>
</div>

DEMO

Answer 3

感谢您的建议。我遵循相同的方法，但因为我有一些额外的要求（我希望在切换到编辑模式时关注值，以便用户可以立即编辑而无需再次单击输入）我最终编写了一个指令。它在这里：

PLUNKER

但这是标记。

{{1}}

Angular：切换两个相关输入的可见性的优雅方式

3 个答案: