ng-repeat बूटस्ट्रैप मोडल

Question

में काम नहीं करता है मैं अलग-अलग बूटस्ट्रैप modal में अलग-अलग सामग्री (यानी, सरणी में आइटम) दिखाने के लिए ng-repeat का उपयोग कर रहा हूं, हालांकि इस example में कुछ अजीब होता है।

मैं शामिल ng-repeat इस तरह में 'मोडल':

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

    <button type="button" class="btn btn-info" data-toggle="modal" data-target="#example"> 
    {{item}} 
    </button> 

    <div class="modal" id="example"> 
    <div class="modal-content"> 
     {{item}} 
    </div> 
    </div> 

</div> 

तो अपेक्षित परिणाम तीन अलग-अलग सामग्री (<button> की तरह साथ तीन बटन होना चाहिए 'हाय' होना चाहिए सामग्री hi, hello सामग्री है hello), हालांकि आप उदाहरण में देखते हैं, सभी तीन बटनों में समान संबंधित मोडल सामग्री होती है।

कोई सुझाव या टिप्पणी की सराहना की जाती है।

Answer 1

आप एक ही आईडी लक्षित कर रहे हैं।

यह करने के लिए परिवर्तित करें:

<button type="button" class="btn btn-info" data-toggle="modal" data-target="#example{{$index}}"> 
    {{item}} 
</button> 

<div class="modal" id="example{{$index}}"> 
    <div class="modal-content"> 
     {{item}} 
    </div> 
</div> 

Updated plucker

Answer 2

आप इसे कुछ तरीकों से कर सकते हैं। कोई नया मॉडल सेट करके ng-click के माध्यम से एक चयन फ़ंक्शन जोड़ना शामिल कर सकता है। इस नए मॉडल को सेट करने से आप अपने ng-repeat से मोडल टेम्पलेट को हटा सकते हैं, जिससे आपके जेनरेट किए गए मार्कअप को पतला और प्रबंधित किया जा सके (यह बहुत सारी चीजों के साथ बड़ा हो सकता है! - <div> को दो या तीन सौ बार दोहराने की आवश्यकता नहीं है) उदाहरण का पालन करना ...

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

    <button type="button" 
     class="btn btn-info" 
     data-toggle="modal" 
     data-target="#example" 
     ng-click="select(item)">{{ item }}</button> 
</div> 

<div class="modal" id="example"> 
    <div class="modal-content"> 
     {{ selected }} 
    </div> 
</div> 

---

myApp.controller('Ctrl', function($scope) { 

    $scope.items = ['hi', 'hey', 'hello']; 

    $scope.select = function(selected) { 
     $scope.selected = selected 
    } 
}); 

Plunker Link - अद्यतन डेमो

Answer 3

यह काम करता है अगर आप अपने क्रियार्थ द्योतक को गतिशील आईडी जोड़ने उदाहरण के लिए:

<div ng-repeat="item in items"> 
    <button type="button" class="btn btn-info" data-toggle="modal" data-target="#{{item}}"> 
     {{item}} 
    </button> 

    <div class="modal" id="{{item}}"> 
     <div class="modal-content"> 
      {{item}} 
     </div> 
    </div> 
    </div>