angular—bootstrap模态框传参

  <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">
前端表单提交。

猜你喜欢

转载自blog.csdn.net/twentyseventh/article/details/79931184