在锚标记点击的玉开放bootstrap模态弹出窗口

时间:2017-06-15 18:24:58

标签: html node.js twitter-bootstrap pug mean-stack

我正在使用MEAN堆栈创建应用,而我的Express视图模板引擎是jade。

我有一个来自API的JSON对象列表。我在行表中显示了几个字段。表格中的每一行都有一个超链接。单击此超链接后,将出现一个模式弹出窗口,显示API返回的JSON中的一些其他字段。

我已设法完成此部分,但所有超链接都显示第一个对象的数据。

这是我的Jade代码,我在其中迭代JSON对象列表并构建超链接。

a(href='#', data-toggle='modal' data-target='#myModal') #{incident.incidentNum}
          #myModal.modal.fade(role='dialog')
            .modal-dialog.modal-lg
              .modal-content
                .modal-header
                  button.close(type='button', data-dismiss='modal') ×
                  h4.modal-title #{incident.incidentPriority} - #{incident.incidentNum} - #{incident.applicationName}
                .modal-body
                  form.form-horizontal
                    .form-group
                      .row
                        label.pull-left.col-sm-2.col-sm-offset-1.control-label Description
                        label.normal-font-weight.pull-left #{incident.description}
                      .row
                        label.pull-left.col-sm-2.col-sm-offset-1.control-label Impact
                        label.normal-font-weight.pull-left #{incident.impact}
                      .row
                        label.pull-left.col-sm-2.col-sm-offset-1.control-label Started On
                        label.normal-font-weight.pull-left #{incident.dtStarted}
                      .row
                        label.pull-left.col-sm-2.col-sm-offset-1.control-label Contact
                        label.normal-font-weight.pull-left #{incident.contact}
                .modal-footer
                  button.btn.btn-default(data-dismiss='modal') Edit
                  button.btn.btn-default(data-dismiss='modal') Email
                  button.btn.btn-default(data-dismiss='modal') Close

我相信所有模态窗口都只显示

的第一个数据对象
data-target='#myModal'

所有模态的id都相同。

如何在单击锚标记时在自己的模态窗口中显示每个JSON对象数据?

0 个答案:

没有答案