单击时根据按钮 id 显示内容

Question

我有一个由动态创建的按钮打开的模式，我想根据按钮的 cid（生成的按钮的属性）显示自定义内容。

我有以下 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 : <%= company[cid].companyName %> 但这不起作用，我正在寻找实现此目的的任何方法，如果有办法满足我的需要，也可以使用 juqery 和 angularjs。

Answer 1

can use jquery and angularjs too if there's a way to do what I need

假设所有代码都使用 ng-click

，您可以使用 angular 来实现

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

这样 angular 可以在点击时更新模式

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

单击时根据按钮 id 显示内容

On Click Display content based on button id

javascript

jquery

ejs

node.js

angularjs