ng-showとng-hideを1つのdivで宣言する方法

Question

私のプロジェクトでは、ng-showとng-hideの両方を1つに使用するという要件がありましたdiv。 私はそれが悪い習慣だと感じました。

htmlコード：

<div ng-hide="itemDIv2" ng-show="itemDIv2"> 
    <input type="text" placeholder="Item Name" ng-model="itemname"> 
    <div> 
     <input type="submit" class="btn" value="Save" ng-click="subcatiems()> 
    </div> 
</div> 

別のdiv：

<div><button class='btn' ng-click="catitems2()">Add items to Category</button></div> 

がコントローラ：

$scope.catitems2 = function(){ 
    return $scope.itemDIv2 = true; 
} 

コを取る方法初めは隠れていて、ボタンをクリックしたときにng-show="itemDIv2"をtrueにしたいのでもう一度divを表示することができます。

Answer 1

@ vp_arthのコメントを拡張するには、両方を必要としません。しかし、ブーリアン・フラグを使って正しい方向に進んでいます。

私は、これらの変更を行うことをお勧め：

button ng-click="ui.showDiv = !ui.showDiv"/

、代わりの：にボタンを変更、

$scope.ui = { showDiv: false }; 

、テンプレートで：

は、コントローラのスコープにこのオブジェクトを追加します。 ng-showとng-hideの両方を使用する場合は、次のように使用します。

ng-show="ui.showDiv" 

この方法でcatitems2（）関数は必要ありません。表示するdivまたは何も隠されていません。

ここで変更の作業JSFiddleです：

http://jsfiddle.net/Lvc0u55v/6534/

Answer 2

ng-showとng-hideの両方が同じ機能を実現するために必要なわけではありません。ボタンクリックで範囲変数$scope.itemDIv2を切り替えることができます。

<div class="settings-heading " style="background-color: #f2f2f2;" 
    ng-show="itemDIv2" ng-init='itemDIv2=true'> 
    Demo text 
</div> 

<div> 
    <button class='btn' ng-click="itemDIv2 = !itemDIv2" > 
    Add items to Category 
    </button> 
</div> 

ワーキングJSBin：https://jsbin.com/vaduwan/2/edit?html,js,console,output

Answer 3

両方ngShowとngHideだけの要素にNG_HIDE_CLASSクラスを追加/削除します。 1つのブールスコープ変数ngShowHide

使用し、そのディレクティブの一つでneccesary値に設定します。

はそれを理解するためにソースを読んでみてください。