0

次のコードは、ラベル付きのチェックボックスを提供します。

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

実際の状態: ボックス自体をクリックするか、ラベルをクリックすることで、ボックスをチェック (解除) できます。カーソルは、box-label-line 全体を指すポインターです。

望ましい状態: ボックス自体をクリックすることによってのみ、チェックボックスをオン (オフ) にできます。ラベルにカーソルを合わせると、カーソルがテキスト カーソルになり、クリックするとその場で編集できるようになります。

どうすればこれを達成できますか？

4

1 に答える 1

1

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;

}
于 2015-12-18T07:38:08.557 に答える