Question

我想在选中复选框时显示一个。这是我在HTML中编写的代码

<div class="row">
    <div class="col-md-6">
      <h1>Are you a musician?</h1>
    </div>
    <div class="col-md-6">
      <label class="switch">
        <input type="checkbox">
        <span class="slider round"></span>
      </label>
    </div>
  </div>

  <ul id="musicianField">
    <!-- Set List - Musician -->
    <input type="text" id="defaultRegisterFormSetList" class="form-control mb-4" name="setlist" placeholder="Set List">
    <!-- Genre - Musician -->
    <input type="text" id="defaultRegisterFormGenre" class="form-control mb-4" name="genre" placeholder="Genre">
    <!-- Price - Musician -->
    <input type="text" id="defaultRegisterFormPrice" class="form-control mb-4" name="price" placeholder="Price">
  </ul>

我不确定仅当选中复选框时如何显示ul，否则将其隐藏。这是一个Angular 6项目

Answer 1

<div class="row">
<div class="col-md-6">
  <h1>Are you a musician?</h1>
</div>
<div class="col-md-6">
  <label class="switch">
    <input [(ngModel)]=‘checkboxValue’ name="isMusician" type="checkbox">
    <span class="slider round"></span>
  </label>
</div>

  <ul *ngIf=‘checkboxValue’ id="musicianField">
<!-- Set List - Musician -->
<input type="text" id="defaultRegisterFormSetList" class="form-control mb-4" name="setlist" placeholder="Set List">
<!-- Genre - Musician -->
<input type="text" id="defaultRegisterFormGenre" class="form-control mb-4" name="genre" placeholder="Genre">
<!-- Price - Musician -->
<input type="text" id="defaultRegisterFormPrice" class="form-control mb-4" name="price" placeholder="Price">

基本上将复选框绑定到ngmodel并基于显示或隐藏ul的值

在复选框上显示<ul>，单击6号角

1 个答案: