2016-06-25 18 views
0

私は動的に作成されたボタンによってオープンされたモーダルを持っており、ボタンのcid(生成されたボタンの属性)に基づいてカスタムコンテンツを表示したい。クリック時ボタンのIDに基づいてコンテンツを表示

私は、次のEJSコードを持っている:

<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> 

これはEJSテンプレートにノードアプリから渡されたJSONデータに基づいていくつかのボタンを生成し、それをクリックすると、下のモーダル開くには:

<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> 

これは私がモーダルにあるボタンから必要なIDを渡している方法です:

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); 
    }); 
}); 

私の考えは、EJSを使用DIVからCID属性を取得し、何とかのような行に挿入することでした: COMPNAME:<% =会社[CID] .companyName%> しかし、それは動作しません。私はこれを達成するための方法を探しています。必要なことをする方法があれば、juqeryとangularjsを使うこともできます。

答えて

1

は私が

必要なものを行う方法があるかどうさてあなたはすべてのコードを想定した角度で​​それを行うことができ、あまりにもjqueryのを使用してangularjsできNGクリック

<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> 
を使用して、共通のスコープを持っています

この道の角は、クリック

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

閉じるにモーダルを更新することができますが、私もそれをのwiを使用する必要があります名前のようなシンejsコード:<%= company [{{selectedId}}]。companyName%> – Trax

+0

なぜ人ですか?あまりにも多くのフレームワークを混乱させています。 1つを選択してそれに固執する –

+0

私はejsと角度を使用していますが、それほど多くはありません。 – Trax

関連する問題