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

在我的項目中，我要求在一個div中同時使用ng-show和ng-hide。我覺得這是一個不好的做法。如何聲明一個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><button class='btn' ng-click="catitems2()">Add items to Category</button></div>

控制器：

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

如何採取共同最初它隱藏起來，當按鈕被點擊時，我想使ng-show="itemDIv2"到true，這樣我就可以再次顯示div。

來源

2016-07-06 Sukumar MS

淺的做法是寫代碼的LO-鄰翁線。 –

爲什麼不使用ng-if？ –

爲什麼你想要這個？ ngShow/ngHide只是顛倒了對方的版本。 –

要擴展@ 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/

來源

2016-07-06 04:36:18 RoboBear

您不需要同一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

來源

2016-07-06 04:26:07

兩個ngShow和ngHide只需添加/刪除NG_HIDE_CLASS類元素。

嘗試讀到的資料瞭解到：ngShowHide

使用一個布爾變量的範圍，它與指令中的一個設置爲neccesary值。

來源

2016-07-06 04:28:55