ejs如何循环生成多个modal,弹出对应的表单弹窗
整个环境用的node.js,模板引擎是选用的ejs(前端文件的后缀不是常规的html,而是ejs,实际上内容跟HTML差不多),从后端拿到数组传递到前端后,我希望通过循环的方式生成对应的多个modal,多次尝试不成功,最终实现,这里只贴了前端的代码,示例代码如下,仅供参考:
<tbody>
<!-- <tr>
<td>now</td>
<td>now</td>
<td>1234</td>
<td>huanglixia</td>
<td>password</td>
<td><a>修改</a><a>/</a><a>删除</a></td>
</tr> -->
<% for(var i=0,len = all_teacher.length; i<len; i++){ %>
<tr>
<td><%= all_teacher[i]['tAddTime'] %></td>
<td><%= all_teacher[i]['tLastTime'] %></td>
<td><%= all_teacher[i]['teacherId'] %></td>
<td><%= all_teacher[i]['tName'] %></td>
<td><%= all_teacher[i]['tPassword'] %></td>
<td>
<button class = "btn" style="outline: none;" data-toggle="modal" data-target="#<%= i %>">修改</button>
<a> | </a>
<button class = "btn" style="outline: none;" href="/manage_teacher/<%= all_teacher[i]['teacherId'] %>/remove">删除</button></td>
<!-- 模态框(Modal)-->
<div class="modal fade" id="<%= i %>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
修改教师信息===<%= all_teacher[i]['teacherId'] %>
</h4>
</div>
<form class="form segment" action="/manage_teacher/<%= all_teacher[i]['teacherId'] %>/edit" method="post" enctype="multipart/form-data">
<div class="modal-body">
<div class="eight wide column">
<div class="form-group field required">
<label class="col-sm-3 control-label">教师ID</label>
<div class="col-sm-9"><input class="form-control" type="text" name="teacherId" id="disabledTextInput" placeholder=<%= all_teacher[i]['teacherId'] %> disabled="disabled"></div>
</div>
<div class="form-group field required">
<label class="col-sm-3 control-label">教师姓名</label>
<div class="col-sm-9"><input class="form-control" type="text" name="tName" placeholder=<%= all_teacher[i]['tName'] %> ></div>
</div>
<div class="form-group field required">
<label class="col-sm-3 control-label">新密码</label>
<div class="col-sm-9"><input class="form-control" placeholder="请输入新密码" type="password" name="tPassword"></div>
</div>
<div class="form-group field required">
<label class="col-sm-3 control-label">重复密码</label>
<div class="col-sm-9"><input class="form-control" placeholder="请再次输入密码" type="password" name="tRePassword"></div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" style="outline: none;" data-dismiss="modal">关闭</button>
<input type="submit" class="btn btn-primary" style="outline: none;" value="提交">
</div>
</form>
</div><!-- modal-content -->
</div><!-- modal-dialog -->
</div><!-- modal -->
</tr>
<% } %>
</tbody>