I have an element that I would like to show only when another form element is NOT disabled.

<input ng-model="myModel">

None of the following work:

<div ng-show="myModel">

This will show if the input is disabled, as long as it has had a value set in the past.

<div ng-show="myModel.enabled">
<div ng-show="!myModel.disabled">

Those props don't seem to exist.

<div ng-show='!angular.element(po.vendor__contact).prop("disabled")'>

Thought that might work to ask jQuery if it's disabled, but it doesn't.

Is there any way to reference whether an element is enabled or not in an Angular directive? Can it be done by asking jQuery?

Thanks!

Fiddle: /

I have an element that I would like to show only when another form element is NOT disabled.

<input ng-model="myModel">

None of the following work:

<div ng-show="myModel">

This will show if the input is disabled, as long as it has had a value set in the past.

<div ng-show="myModel.enabled">
<div ng-show="!myModel.disabled">

Those props don't seem to exist.

<div ng-show='!angular.element(po.vendor__contact).prop("disabled")'>

Thought that might work to ask jQuery if it's disabled, but it doesn't.

Is there any way to reference whether an element is enabled or not in an Angular directive? Can it be done by asking jQuery?

Thanks!

Fiddle: http://jsfiddle/ADukg/3197/

• javascript
• angularjs
• angularjs-directive

1 Answer 1

I think your not using Angular the right way. You should not base the visibility of an element based on the state of another element.

Both elements should depend on the model:

<input ng-model="myModel" ng-disabled="isDisabled">
<div ng-hide="isDisabled">

Basically, view reflects the model, don't inspect the DOM, and don't use jQuery. Also you can use ng-hide instead of ng-show and !

Edit: http://jsfiddle/ADukg/3198/