ng-disable not working in a radio button div

Question

I have a radio button div here that I would like to disable if yAxisEditorCtrl.forceCombinedYAxis is true.

Here's the code before my change

  <div class="y-axis-editor">
    <div class="vis-config-option display-size-normal form-group" ng-if=" yAxisEditorCtrl.supportsType()">
      <lk-vis-editor-radio-input label="Scale Type" model="yAxisEditorCtrl.type" options="yAxisEditorCtrl.typeOptions"/>
    </div>
    ...
  </div>

Where the definition of model and options are:

  @type =
    value: null

  @typeOptions = [
    {name: "Linear", value: "linear"}
    {name: "Logarithmic", value: "log"}
  ]

So I tried to add ng-disabled="yAxisEditorCtrl.forceCombinedYAxis" to my div like this:

  <div class="y-axis-editor">
    <div class="vis-config-option display-size-normal form-group" ng-if=" yAxisEditorCtrl.supportsType()" ng-disabled="yAxisEditorCtrl.forceCombinedYAxis">
      <lk-vis-editor-radio-input label="Scale Type" model="yAxisEditorCtrl.type" options="yAxisEditorCtrl.typeOptions"/>
    </div>
    ...
  </div>

However, even with ng-disabled to true (I checked the output), it still won't disable.

I even tried adding it within the div where the radio button is defined, but still not disabled.

Curious how I could get this to work?

Answer 1

ng-disabled is for inputs, it appears you inadvertently put it on the div.

Here's the corrected code:

  <div class="y-axis-editor">
    <div class="vis-config-option display-size-normal form-group" ng-if="yAxisEditorCtrl.supportsType()">
      <lk-vis-editor-radio-input label="Scale Type" ng-disabled="yAxisEditorCtrl.forceCombinedYAxis" />
    </div>
    ...
  </div>

As a div is not interactive, it cannot be disabled. If you want it to have a particular appearance or styling, I'd recommend using ng-class to conditionally add the "disabled" appearing class to the div