Добавьте значения из флажков на Angular

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>

Я нашел много информации о том, как это сделать с vanilla JS или jQuery, но у меня много проблем с angular. Есть идеи?

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 , как хотите.

Рабочий пример можно найти здесь