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

我有2个相关的输入角度之一是类型号码，另一个是类型文本。Angular：优雅的方式来切换两个相关输入的可见性

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

在任何给定时间只显示其中一个。我想要的行为是文本输入被初始显示，然后在点击事件中文本输入被隐藏，并显示数字输入。同样，当数字输入发生模糊事件时，数字输入被隐藏，并显示文本输入。

这样做的标记看起来是这样的：

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

我知道我可以添加额外的属性，使这项工作，但是是相对较新的角度这种感觉就像之类的事情这可能是一个优雅的解决方案。

任何帮助将不胜感激。

来源

2016-12-07 swervo

那么，它不能解决你的问题，但你有没有尝试过https://github.com/aguirrel/ng-currency。它工作得很好！ – lin

我没有见过。但我不想让文本输入 - 即使它自己清理完毕。 – swervo

您现在是否找到了解决方案？ – lin

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

PLUNKER

但这里的标记。

<div class="mt-flight-input" ng-class="{'mt-dirty': value.newvalue != value.initial, 'mt-zero': value.newvalue == 0}"> 
    <input type="number" class="mt-input" placeholder="0" ng-show="value.isAuthoring" ng-model="value.newvalue" ng-blur="checkValue('blur', value)" ng-focus="checkValue('focus', value)"> 
    <input type="text" class="mt-input" placeholder="0" ng-show="!value.isAuthoring" ng-value="value.newvalue | currency:'': '0'| comma2dots" ng-click="showEditor($event, value)" ng-focus="showEditor($event, value)" readonly="readonly"> 
</div>

来源

2016-12-09 19:23:10 swervo

您可以在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>

检查plunker这里：

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

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

来源

2016-12-07 13:51:12 Fissio

试试这样的事

<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

来源

2016-12-07 14:11:45 Aravind

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

回答

相关问题