come dichiarare ng-show e ng-hide in un div

Question

Nel mio progetto ho avuto l'obbligo di utilizzare sia ng-show e ng-hide in uno div. Ho sentito che è una cattiva pratica.

codice 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> 

un altro div:

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

regolatore:

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

come prendere un co ndizione che inizialmente è su hide e quando si fa clic sul pulsante voglio rendere ng-show="itemDIv2" a true in modo da poter mostrare lo div un altro tomo.

Answer 1

Per espandere il commento di @ vp_arth, non sono necessari entrambi. Ma sei sulla strada giusta con la bandiera booleana.

Vorrei suggerire fare questi cambiamenti:

Aggiungi questo oggetto per l'ambito di controllo:

$scope.ui = { showDiv: false }; 

E nel modello, cambiare il pulsante per:

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

E invece di sia ng-show che ng-hide, utilizzare:

ng-show="ui.showDiv" 

In questo modo non hai bisogno di una funzione catitems2() e il div o quello che vuoi mostrare inizia nascosto.

Ecco un JSFiddle di lavoro dei cambiamenti:

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

Answer 2

Non è necessario sia lo ng-show e lo ng-hide sullo stesso div per ottenere questa funzionalità. È possibile attivare la variabile scope $scope.itemDIv2 al clic del pulsante.

<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> 

lavoro JSBin: https://jsbin.com/vaduwan/2/edit?html,js,console,output

Answer 3

Sia ngShow e ngHide basta aggiungere/rimuovere NG_HIDE_CLASS classe per elemento.

Prova leggere le fonti per capire che: ngShowHide

Utilizzare una variabile booleana portata e impostarla sul valore neccesary con uno di quei direttive.