एक div

Question

में एनजी-शो और एनजी-छिपाने की घोषणा कैसे करें मेरे प्रोजेक्ट में मुझे ng-show और ng-hide दोनों को div में उपयोग करने की आवश्यकता थी। मुझे लगा कि यह एक बुरा अभ्यास है।

एचटीएमएल कोड:

<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

@ vp_arth की टिप्पणी पर विस्तार करने के लिए, आपको दोनों की आवश्यकता नहीं है। लेकिन आप बुलियन ध्वज के साथ सही रास्ते पर हैं।

नियंत्रक गुंजाइश को यह वस्तु जोड़ें::

$scope.ui = { showDiv: false }; 

और टेम्पलेट में, करने के लिए बटन बदलने के लिए:

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

और के बजाय

मैं इन परिवर्तनों को करने का सुझाव देते हैं दोनों एनजी-शो और एनजी-छुपाएं, उपयोग करें:

ng-show="ui.showDiv" 

इस तरह आपको catitems2() फ़ंक्शन की आवश्यकता नहीं है, और div या जो आप दिखाना चाहते हैं वह छिपी हुई शुरू होती है।

यहाँ परिवर्तन का एक काम कर JSFiddle है:

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

Answer 2

आपको इस कार्यक्षमता को प्राप्त करने के लिए 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 3

दोनों ngShow और ngHide बस जोड़ने/तत्व को NG_HIDE_CLASS वर्ग को हटा दें।

कि समझने के लिए स्रोतों को पढ़ का प्रयास करें: ngShowHide

उपयोग एक बूलियन गुंजाइश चर और आवश्यक मूल्य के लिए सेट है कि निर्देशों में से एक के साथ।