1

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.

enter image description here

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?

georgeawg
  • 48,608
  • 13
  • 72
  • 95
theGreenCabbage
  • 5,197
  • 19
  • 79
  • 169
  • It says `true` or `false`, which is what I expected. No errors. – theGreenCabbage Jun 12 '18 at 22:02
  • Nope, removing the `ng-if` does not work. – theGreenCabbage Jun 12 '18 at 22:08
  • Even if I set it to `ng-disabled="true"` it doesn't work. So I'm pretty confused – theGreenCabbage Jun 12 '18 at 22:08
  • Two quick things: (1) `disabled` on the `div` will _not_ do anything.... and, (2) I just realized that you're using some sort of directive for the input, _not_ a standard HTML input. Change the input to ` and test that. _Then_, you need to share with us which library you are using that contains the `lk-vis-editor-radio-input` directive... **The trick to troubleshooting things like this** is to start simple, then add complexity. So move that `ng-disabled` to the input, and change the input to a standard input.... then, do the research on `lk-vis-editor-radio-input` – random_user_name Jun 13 '18 at 00:01

1 Answers1

0

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

random_user_name
  • 25,694
  • 7
  • 76
  • 115
  • Hm, that still did not work. I am wondering if it's because of some missing information I thought wasn't necessary in the question. I'm going to update my div with all my code, in particular, adding in the `model` and `options` – theGreenCabbage Jun 12 '18 at 22:19
  • Hi cale_b, I've updated the code hoping to shine some more light to this issue. – theGreenCabbage Jun 12 '18 at 23:58