редактирование на месте угловой Материал Checkbox Этикетка

Question

Следующий код дает мне флажок с меткой:

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

Фактическое состояние: Я (не) установите флажок, щелкнув либо сам ящик или нажав на метку. Курсор - это указатель на всю строку-ярлык.

Желаемый Состояние: Я могу (un) установить флажок, только щелкнув по самому ящику. При наведении указателя курсор должен стать текстовым курсором, и щелчок по нему должен предлагать редактирование на месте.

Как я могу это достичь?

Answer 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-флажок, обратите внимание на отображаемое значение и значение ширины.

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; 

}