एनजी-रिपीट के भीतर एनजी-क्लिक पर हिडन डिव दिखाएं

Question

मैं एक Angular.js ऐप पर काम कर रहा हूं जो मेडिकल प्रक्रियाओं की एक json फ़ाइल के माध्यम से फ़िल्टर करता है। मैं प्रत्येक प्रक्रिया का विवरण दिखाना चाहता हूं, जब प्रक्रिया का नाम एनजी-क्लिक का उपयोग करके (उसी पृष्ठ पर) क्लिक किया जाता है। यह मेरे पास अभी तक है, .procedure-details div सेट के साथ प्रदर्शित करने के लिए: कोई नहीं:

<ul class="procedures">
    <li ng-repeat="procedure in procedures | filter:query | orderBy:orderProp">
        <h4><a href="#" ng-click="?">{{procedure.definition}}</a></h4>
         <div class="procedure-details">
            <p>Number of patient discharges: {{procedure.discharges}}</p>
            <p>Average amount covered by Medicare: {{procedure.covered}}</p>
            <p>Average total payments: {{procedure.payments}}</p>
         </div>
    </li>
</ul>

मैं कोणीय में बहुत नया हूँ। कोई सुझाव?

Comments

इसके अलावा, आपको वास्तव में एक तत्व में एक href = "#" की आवश्यकता नहीं है।

— फू ल

यदि आप एक HTML सत्यापनकर्ता को पास करना चाहते हैं तो आप करते हैं।

— डैनी बुल्स

Answer 1

इसके बजाय निकालें display:noneऔर उपयोग करें ng-show:

<ul class="procedures">
    <li ng-repeat="procedure in procedures | filter:query | orderBy:orderProp">
        <h4><a href="#" ng-click="showDetails = ! showDetails">{{procedure.definition}}</a></h4>
         <div class="procedure-details" ng-show="showDetails">
            <p>Number of patient discharges: {{procedure.discharges}}</p>
            <p>Average amount covered by Medicare: {{procedure.covered}}</p>
            <p>Average total payments: {{procedure.payments}}</p>
         </div>
    </li>
</ul>

यहाँ की बेला है: http://jsfiddle.net/asmKj/

---

आप ng-classक्लास टॉगल करने के लिए भी उपयोग कर सकते हैं :

<div class="procedure-details" ng-class="{ 'hidden': ! showDetails }">

मुझे यह अधिक पसंद है, क्योंकि यह आपको कुछ अच्छे बदलाव करने की अनुमति देता है: http://jsfiddle.net/asmKj/1/

Comments

जब मैं दूसरी div पर क्लिक करता हूं तो पहले div को कैसे छिपाया जाता है।

— यूजर123

ऊपर दिए गए क्यू का उत्तर देने के लिए ... बस एनजी-वर्ग को छिपाकर सही पर बदलें .... एनजी-क्लास = "{'हिडन': showDetails}"

— क्रिस लैम्ब्रू

Answer 2

हैंडलर में स्कोप वैरिएबल ng-showके मान का उपयोग करें और टॉगल करें ।showng-click

यहाँ एक कार्यशील उदाहरण दिया गया है: http://jsfiddle.net/pvtpenguin/wD7gR/1/

<ul class="procedures">
    <li ng-repeat="procedure in procedures">
        <h4><a href="#" ng-click="show = !show">{{procedure.definition}}</a></h4>
         <div class="procedure-details" ng-show="show">
            <p>Number of patient discharges: {{procedure.discharges}}</p>
            <p>Average amount covered by Medicare: {{procedure.covered}}</p>
            <p>Average total payments: {{procedure.payments}}</p>
         </div>
    </li>
</ul>

Comments

जब मैं दूसरी div पर क्लिक करता हूं तो पहले div को कैसे छिपाया जाता है।

— यूजर123

यह मुझे पहेली ... यह "गुंजाइश" चर कैसे काम करता है? जब मैं इसे आज़माता हूं, तो सभी छिप जाते हैं !?

— निको