एनजी-दोहराना: क्लिक करने और अन्य लोगों को छिपाने पर एक आइटम दिखा रहा है

Question

मेरे पास एक ng-repeat है जो divs की एक सूची प्रदर्शित करता है और जब मैं एक पर क्लिक करता हूं तो यह क्लिक किए गए आइटम के लिए एक aditionnal div दिखाता है।

यह

<div ng-repeat="item in items"> 

    <div ng-click="showfull = !showfull"> 
     <div> 
      <h1>{{item.title}}</h1> 
      <p>{{item.content}}</p> 
     </div> 
    </div> 
    <div ng-show="showfull"> 
     <p>{{item.info}}</p> 
    </div> 
    <hr/> 
</div> 

मेरे कपड़े एक json आइटम की सूची से युक्त से लोड किए गए हैं काम कर रहा है और प्रत्येक आइटम इस json में false करने के लिए डिफ़ॉल्ट attribut showfull सेट है। यह काम कर रहा है, लेकिन अब जब कोई आइटम क्लिक किया जाता है तो मैं सूची में अन्य सभी आइटम छिपाना चाहता हूं। मैं कुछ इस तरह tryied है:

यह

<div ng-repeat="item in items"> 

    <div ng-click="expand(item)"> 
     <div> 
      <h1>{{item.title}}</h1> 
      <p>{{item.content}}</p> 
     </div> 
    </div> 
    <div ng-show="showfull"> 
     <p>{{item.info}}</p> 
    </div> 
    <hr/> 
</div> 

काम नहीं कर रहा और नियंत्रक में मैं एक समारोह जोड़ दिया है:

$scope.expand = function(e) { 
    e.showfull = !e.showfull; 
    //TODO: put here a foreach logic to hide all other items 
} 

लेकिन फिर भी foreach तर्क के बिना इस काम नहीं कर रहा है, आइटम क्लिक करते समय अतिरिक्त div नहीं दिखाता है। मैं दो सवाल है:

1. मुझे लगता है इस item के कारण expand समारोह या गुंजाइश अलगाव मुद्दा किसी तरह का में "कॉपी द्वारा पारित" किया जा रहा है, लेकिन आप मुझे समझा सकता है क्यों विस्तार से?

2. मैं अन्य सभी वस्तुओं के अतिरिक्त div छिपा कर सकते हैं कैसे जब मैं एक आइटम पर क्लिक करें और इस मद के लिए additionnal सामग्री को दिखाने के हल? क्या मुझे निर्देश करने की ज़रूरत है? नहीं

हल धन्यवाद

Answer 1

I लगता है कि आप सही रास्ते पर हैं। आपको आइटम पर showfull सेट करने की आवश्यकता है और फिर इसे छिपाने के लिए ng-show या ng-if का उपयोग करें, या गैविन का उल्लेख किया गया है, एक वर्ग का उपयोग करें।

ng-click पर आप अपने expand फ़ंक्शन को कॉल कर सकते हैं, जहां आप आइटम पास करते हैं, इसे टॉगल करते हैं और अन्य सभी को छिपाने के लिए सेट करते हैं।

टेम्पलेट:

<div ng-repeat="item in items> 
    <div ng-click="expand(item)"> 
     <div> 
      <h1>{{item.title}}</h1> 
      <p>{{item.content}}</p> 
     </div> 
    </div> 
    <div ng-show="item.showfull"> 
     <p>{{item.info}}</p> 
    </div> 
    <hr/> 
</div> 

नियंत्रक:

$scope.expand = function (item) { 
    angular.forEach($scope.items, function (currentItem) { 
     currentItem.showfull = currentItem === item && !currentItem.showfull; 
    }); 
}; 

Answer 2

आपका विस्तार विधि आइटम संशोधित है, इसलिए आपका एनजी शो आइटम को संदर्भित करने की जरूरत है:

<div ng-show="item.showfull"> 
    <p>{{item.info}}</p> 
</div> 

अपने आइटम के सभी को छुपाने के लिए आप

$scope.expand = function(item) { 
    angular.forEach(items, function(i) { 
     if (i === item) { 
      i.showfull = !i.showfull; 
     } else { 
      i.showfull = false; 
     } 
    }); 
}; 

Answer 3

चाहिए नहीं दूसरी div आप आइटम को संदर्भित हो दिखाना चाहते हैं?

<div ng-repeat="item in items> 

    <div ng-click="expand(item)"> 
     <div> 
      <h1>{{item.title}}</h1> 
      <p>{{item.content}}</p> 
     </div> 
    </div> 
    <!-- Added item to ng-show --> 
    <div ng-show="item.showfull"> 
     <p>{{item.info}}</p> 
    </div> 
    <hr/> 
</div>