javascript - 如何在一个 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>

Controller :

$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