<div class="row"> <table class="table table-bordered tableclick" > <thead> <tr> <th>序号</th> <th>校区</th> <th>场地名称</th> <th>场地编号</th> <th>场地类别</th> <th>场地容量</th> <th>场地用途</th> <th>场地地点</th> <th>操作</th> </tr> </thead> <tbody> <tr *ngFor="let home of homes;let i = index" > <td style="display: none">{{home.uid}}</td> <td>{{home.id}}</td> <td>{{home.campus}}</td> <td>{{home.name}}</td> <td>{{home.number}}</td> <td>{{home.type}}</td> <td>{{home.capacity}}</td> <td>{{home.use}}</td> <td>{{home.location}}</td> <td> <span class="btn btn-primary btn_set_time" data-toggle="modal" data-target="#myModal">设置活动时间</span> </td> </tr> </tbody> </table> </div> </div> <!--模态框--> <div class="modal fade" data-backdrop="false" id="myModal" 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">设置活动时间</h4> </div> <div class="modal-body"> <form [formGroup]="formModel2" (ngSubmit)="onSearch2()" novalidate> <div class="form-group"> <label for="weeks">周次</label> <div class="inline"> <input type="hidden" id="uid"> <select id="weeks" formControlName="weeks" class="form-control selectpicker show-tick form-control" data-first-option="false" required data-live-search="true"> <option value="" selected="selected">全部</option> <option *ngFor="let weeks of weekss" [value]="weeks.uid">{{weeks.name}}</option> </select> </div> </div> <div class="form-group"> <label for="week">星期</label> <div class="inline"> <select id="week" formControlName="week" class="form-control selectpicker show-tick form-control" data-first-option="false" required data-live-search="true"> <option value="" selected="selected">全部</option> <option *ngFor="let week of week1" [value]="week.uid">{{week.name}}</option> </select> </div> </div> <div class="form-group"> <label for="time1">时间</label> <div class="inline"> <select id="time1" formControlName="time1" class="form-control selectpicker show-tick form-control" data-first-option="false" required data-live-search="true"> <option value="" selected="selected">全部</option> <option *ngFor="let time of times" [value]="time.uid">{{time.name}}</option> </select> </div> </div> <hr> <div class="form-group"> <div class="layui-inline"> <label class="layui-form-label">日期范围</label> <div class="layui-input-inline inline"> <input type="text" class="layui-input" id="test6" placeholder=" - " formControlName="calender"> </div> </div> </div> <div class="form-group"> <label for="time">时间</label> <div class="inline"> <select id="time" formControlName="time" class="form-control selectpicker show-tick form-control" data-first-option="false" required data-live-search="true"> <option value="" selected="selected">全部</option> <option *ngFor="let time of times" [value]="time.uid">{{time.name}}</option> </select> </div> </div> <div class="pe-coach"> <button type="submit" class="btn btn-primary">设置</button> </div> </form> </div> </div> </div> </div>
data-backdrop=false设置点击模态框之外不会消失,默认为true
点击按钮,传递uid的参数。将获取到uid赋值给前端页面。
let self = this; $(".tableclick tbody").on("click",".btn_set_time",function() { let uid = $(this).parent().parent().children("td").eq(0).text().toString(); $("#uid").val(uid); });
我这边用一个input将获取到的参数隐藏
<input type="hidden" id="uid">前端表单提交。