角度材料复选框标签的就地编辑

Posted 2021-04-08

以下代码为我提供了一个带有标签的复选框：

<md-checkbox ng-model="data.foo">
  This Label should be editable
</md-checkbox>

实际状态：我可以通过单击框本身或单击标签来（取消）选中此框。光标是整个box-label-line的指针。

期望的状态：我只能通过单击框本身来（联合国）检查框。悬停标签时，光标应成为文本光标，单击它应提供就地编辑。

我怎样才能做到这一点？

答案

像这样修改html：

<div ng-app="sandbox" class="ng-scope">    
  <md-checkbox ng-model="data.label" aria-label="Editable label" role="checkbox" class="ng-valid md-default-theme ng-dirty ng-valid-parse ng-touched md-checked" tabindex="0" aria-checked="true" aria-invalid="false" style="">
    <div class="md-container" md-ink-ripple="" md-ink-ripple-checkbox="">
      <div class="md-icon"></div>
      <div class="md-ripple-container"></div>
    </div>
  </md-checkbox>
  <div ng-transclude="" class="md-label" style="display: inline-block;">
    <span class="ng-scope">
      This label should be editable
    </span>
  </div>
</div>

修改css类md-checkbox，记下显示值和宽度值。

md-checkbox {
    box-sizing: border-box;
    display: inline;
    margin: 8px;
    white-space: nowrap;
    cursor: pointer;
    outline: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding-left: 18px;
    padding-right: 0;
    position: relative;
    line-height: 26px;
    min-width: 18px;
    min-height: 18px;
    width: 18px;

}