角度：関連する2つの入力の表示を切り替えるためのエレガントな方法

Question

角度1の2つの関連入力はタイプ番号で、もう1つはタイプテキストです。

両方とも同じ値を表示しますが、唯一の違いは、タイプテキスト入力が通貨用にフォーマットされたタイプ番号入力の値を表示することです。

これらは常に表示されます。私が望む動作は、テキスト入力が最初に表示され、次にクリックイベントでテキスト入力が隠され、数字入力が表示されることです。同様に、数値入力でブラーイベントが発生すると、数値入力は非表示になり、テキスト入力が表示されます。

このためのマークアップは、このようなものになります。私はこれが事の一種のように感じて、私はこの仕事をするために余分なプロパティを追加することができます知っているが、角度に比較的新しいもの

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

をそれはおそらくエレガントなソリューションがあります。

ご協力いただければ幸いです。

Answer 1

ありがとうございます。私は同じアプローチをしましたが、いくつかの追加要件がありました（編集モードに切り替えるときに値を集中させて、ユーザーが入力を再度クリックすることなく即座に編集できるようにしたいと思いました）。それはここにある：

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> 

Answer 2

変数を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

、これはアプリの周りを複数回使用するつもりコンポーネントである場合、あなたは同じことを実現するカスタムディレクティブを作成することができます機能性は、ひいては

Answer 3

この

<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