如何在一個div中聲明ng-show和ng-hide

Question

在我的項目中，我需要在一個div同時使用ng-show和ng-hide 。 我覺得這是一個不好的做法。

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

您不需要同一個div上的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 2

要擴展@ vp_arth的評論，您不需要兩者。 但是你在布爾標志的正確軌道上。

我建議做出這些改變：

將此對象添加到控制器范圍：

$scope.ui = { showDiv: false };

在模板中，將按鈕更改為：

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

而不是ng-show和ng-hide，使用：

ng-show="ui.showDiv"

這樣你就不需要一個catitems2（）函數了，div或你想要顯示的東西開始隱藏。

這是一個改進的JSFiddle：

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

Answer 3

ngShow和ngHide只是為元素添加/刪除NG_HIDE_CLASS類。

嘗試閱讀來源以了解： ngShowHide

使用一個布爾范圍變量，並使用其中一個指令將其設置為neccesary值。