Question

我有一个疑问。我要在最终输入（#equipamentoPunct）上添加一些复选框，以最终提交所有数据：

<div class="form-group">
  <label><h3>Equipamento</h3></label> <br>
  <label><input type="checkbox" id="cbox1" class="sumEq" value="14,28571429"> Equipo de sonido</label><br>
  <label><input type="checkbox" id="cbox2" class="sumEq" value="14,28571429"> Equipo de luces </label><br>
  <label><input type="checkbox" id="cbox3" class="sumEq" value="14,28571429"> Ryder</label><br>
  <label><input type="checkbox" id="cbox4" class="sumEq" value="14,28571429"> Backline</label><br>
  <label><input type="checkbox" id="cbox5" class="sumEq" value="14,28571429"> Alquiler de equipos</label><br>
  <label><input type="checkbox" id="cbox6" class="sumEq" value="14,28571429"> Escenario</label><br>
  <label><input type="checkbox" id="cbox7" class="sumEq" value="0"> Camerinos 0</label><br>
  <label><input type="checkbox" id="cbox8" class="sumEq" value="4,76190476"> Camerinos 1 o 2</label><br>
  <label><input type="checkbox" id="cbox9" class="sumEq" value="14,28571429"> Camerinos 3+</label><br>
</div>

<div class="form-group">
  <label for="equipamentoPunct">Puntuación Equipamento</label>
  <input type="number" class="form-control" id="equipamentoPunct" name="equipamentoPunct" [(ngModel)]="venue.equipamentoPunct">
</div>

我建立了很多有关如何使用香草JS或jQuery的信息，但是我在角度上有很多问题。有什么想法吗？

Answer 1

如果我做对了，您可以这样做：

在模板中，您可以将方法调用绑定到输入的 change 事件。

<input type="checkbox" (change)="changeValue($event, 1)"> <span>1</span> <br/>
<input type="checkbox" (change)="changeValue($event, 1)"> <span>1</span> <br/>

在控制器中，您可以根据是否检查输入来添加/删除值：

  public totalValue = 0;

  public changeValue(event, value) {
    if (event.srcElement.checked) {
      this.totalValue += value;
    } else {
      this.totalValue -= value;
    }
  }

您可以根据需要使用 totalValue 。

您可以找到一个有效的示例here

从Angular复选框中添加值

1 个答案: