如何让哈巴狗可选择标签？

Question

我有一个哈巴狗 mixin。除了实际的单选按钮本身之外，我还想使用标签属性到 select 单选按钮。现在它只是 select 列表中的第一项。我认为这是因为哈巴狗没有导出纯文本 html。现在呈现的 html 看起来像这样：

<div _ngcontent-c4="" class="form-check">
  <input _ngcontent-c4="" checked="!{data.checked}" class="form-check-input" id="!{data.value}" name="!{data.name}" type="radio" value="!{data.value}">
  <label _ngcontent-c4="" class="form-check-label" for="!{data.value}">Initial Contact</label>
</div>

。而不是：

<div _ngcontent-c4="" class="form-check">
  <input _ngcontent-c4="" checked="true" class="form-check-input" id="myId" name="myForm" type="radio" value="pricing}">
  <label _ngcontent-c4="" class="form-check-label" for="myId">Pricing Info</label>
</div>

.

 mixin formCheck(data)
        .form-check
          input.form-check-input(type='radio', name='!{data.name}', value='!{data.value}', checked='!{data.checked}', id='!{data.value}')
          label.form-check-label(for='!{data.value}') !{data.label}

Answer 1

ES6 拯救：

mixin formCheck(data)
    .form-check
       input.form-check-input(type='radio', name=`${data.name}`, value=`${data.value}`, checked=`${data.checked}`, id=`${data.value}`)
       label.form-check-label(for=`${data.value}`) !{data.label}

Answer 2

或者，您可以直接设置值——无需字符串插值或 ES6：

mixin formCheck(data)
  .form-check
    input.form-check-input(
      type='radio',
      name= data.name,
      value= data.value,
      checked= data.checked,
      id= data.value
    )
    label.form-check-label(
      for= data.value
    ) !{data.label}

如何让哈巴狗可选择标签？

How to make label selectable with pug?

label

bootstrap-4

pug

angular