এনজি-পুনরাবৃত্তির মধ্যে এনজি-ক্লিকের উপরে লুকানো ডিভ দেখান

Question

আমি একটি Angular.js অ্যাপে কাজ করছি যা চিকিত্সা পদ্ধতির একটি জেসন ফাইলের মাধ্যমে ফিল্টার করে। এনজি-ক্লিক ব্যবহার করে পদ্ধতির নামটি ক্লিক করা হলে (একই পৃষ্ঠায়) প্রতিটি পদ্ধতির বিবরণ প্রদর্শন করতে চাই। এই পর্যন্ত আমার কাছে যা আছে। প্রসেসরের বিবরণ ডিভ প্রদর্শন করতে সেট করা আছে: কিছুই নেই:

<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 = "#" লাগবে না।

— ফু

আপনি যদি কোনও এইচটিএমএল যাচাইকারী পাস করতে চান তবে আপনি তা করেন।

— ড্যানি বুলিস

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

দ্বিতীয় ডিভিতে ক্লিক করার পরে প্রথম ডিভটি কীভাবে আড়াল করব।

— ব্যবহারকারী 123

উপরের প্রশ্নটির উত্তর দেওয়ার জন্য ... শুধু এনজি-ক্লাসটি সত্যে লুকিয়ে রাখুন .... এনজি-শ্রেণি = "hidden 'লুকানো': শোডেটেলস}"

— ক্রিস ল্যাম্ব্রো

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

দ্বিতীয় ডিভিতে ক্লিক করার পরে প্রথম ডিভটি কীভাবে আড়াল করব।

— ব্যবহারকারী 123

এই আমার ধাঁধা ... এই "সুযোগ" পরিবর্তনশীল কিভাবে কাজ করে? আমি যখন এটি চেষ্টা করি তখন সমস্ত লুকিয়ে থাকে !?

— নিকো