Ein Klick Inhalt anzeigen basierend auf Schaltflächen-ID

Question

Ich habe ein Modal, das von einer dynamisch erstellten Schaltfläche geöffnet wird, und ich möchte einen benutzerdefinierten Inhalt basierend auf der CID (Attribut der generierten Schaltfläche) der Schaltfläche anzeigen.

Ich habe folgendes EJS Code:

<ul> 
    <% company.forEach(function(comp) { %> 
    <li><%= comp.companyName %> <button class="btn btn-primary manageCompany" data-cid=<%=comp._id%> data-toggle="modal" data-target="#manageCompany_pp">Manage</button> </li> 
    <% }); %> 
</ul> 

Dieses ein paar Tasten erzeugt basierend auf JSON-Daten von einem Knoten App auf die EJS Template übergeben, auf klicken, um es öffnet sich das modale unter:

<div class="modal fade " id="manageCompany_pp" tabindex="-1" cid="" role="dialog" aria-labelledby="manageCompany_pp"> 
       <div class="modal-dialog modal-lg" role="document"> 
        <div class="modal-content"> 
         <div class="modal-header"> 
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
           <span aria-hidden="true">&times;</span> 
          </button> 
          <h4 class="modal-title" id="manageCompany_content">Manage Company</h4> 
         </div> 
         <div class="modal-body"> 
          <div class='manageCompanyAlert'></div> 
          Name: <%= company[cid].companyName %> //<-- get cid attr .. somehow 
         </div> 
         <div class="modal-footer"> 
          <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button> 
         </div> 
        </div> 
       </div> 
      </div> 

Dies ist, wie ich die benötigte ID vom Button auf dem modalen vorbei:

script.js

$(document).ready(function() { 
     $('#manageCompany_pp').on('show.bs.modal', function(event) { 
     var button = $(event.relatedTarget); // Button that triggered the modal 
     var cid = button.data('cid'); // Extract info from data-* attributes 
     console.log('here' + cid); 
     var modal = $(this); 
     modal.attr('cid', cid); 
    }); 
}); 

war meine Idee ejs zu verwenden, rufen Sie das cid Attribut aus dem div und dann irgendwie in eine Linie einfügen wie: COMPNAME: <% = company [cid] .companyName%> Aber das funktioniert nicht Ich suche nach einer Methode, um dies zu erreichen, kann juqery und angularjs auch verwenden, wenn es eine Möglichkeit gibt, das zu tun, was ich brauche.

Answer 1

kann jquery verwenden und AngularJS auch wenn es eine Möglichkeit gibt, zu tun, was ich brauche

Nun, Sie könnte es tun mit Winkel unter der Annahme, den gesamten Code haben einen gemeinsamen Rahmen mit ng Sie auf

<li><%= comp.companyName %> <button ng-click="selectedId = <%=comp._id%>" class="btn btn-primary manageCompany" data-cid=<%=comp._id%> data-toggle="modal" data-target="#manageCompany_pp">Manage</button> </li> 

auf diese Weise Winkel die modale auf Klick

 <div class="modal-body"> 
      <div class='manageCompanyAlert'></div> 
      Name: {{ selectedId }} <!-- get cid attr --> 
     </div>