如何在一个div中声明ng-show和ng-hide

Question

在我的项目,我不得不同时使用的要求ng-show,并ng-hide在一个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

你并不需要同时ng-show和ng-hide在同一div来达致这功能.您可以$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/