1

I am trying to use ng-disabled on an input (either text or number)

<input ng-disabled="{{attribute.selected}}"...

which I have seen working when bound to a checkbox but i cant seem to get it working here.

I have tried without the {{}} but the markup then just contains the 'attribute.selected' instead of true or false

When clicking the md-checkbox i can see in chrome dev tools that the value is changing. ng-disabled="true" then ng-disabled="false"

When using !attribute.selected the inputs are disabled and dont re-enable when the value goes true.

full snippet: 

    <md-content layout-padding layout-xs="column">
        <md-checkbox md-ink-ripple="#2199FF" id="attr{{attribute.id}}" ng-model="attribute.selected">
            {{attribute.name}}
        </md-checkbox>

        <md-content layout-padding ng-repeat="property in attribute.properties">

            <md-input-container >
                <label>{{property.name}}</label>
                <input ng-disabled="{{attribute.selected}}" md-maxlength="{{property.maxLength}}" type="{{property.type}}" required name="{{property.name}}" ng-model="property.value">
                <div ng-messages="Required">
                    <div ng-message="required">This is required.</div>
                    <div ng-message="md-maxlength">Max {{property.maxLength}} digits</div>
                </div>
            </md-input-container>

        </md-content>
    </md-content>

</div>

S Rosam
  • 375
  • 1
  • 3
  • 16
  • 1
    You should not need {{}} with ng-disabled. This is interpolated automatically – Narain Mittal Mar 22 '16 at 22:32
  • I have tried without the {{}} it shows property.name in the html – S Rosam Mar 22 '16 at 22:56
  • Don't change the ``, change the `ng-disabled="{{attribute.selected}}"` to `ng-disabled="attribute.selected"`. – Lex Mar 22 '16 at 22:59
  • Sorry typo from me there I meant selected – S Rosam Mar 22 '16 at 23:16
  • It looks like `attribute.selected` is `undefined`. Maybe you need to make sure that default value for the variable is defined in the scope. – olysachok Mar 23 '16 at 00:49
  • Apologies one and all.. that totally worked.. i was fixated on the fact that in the html is the string !attribute.selected rather than true or false.. thank you! – S Rosam Mar 23 '16 at 07:24

1 Answers1

0

change ng-disabled="{{attribute.selected}}" by ng-disabled="attribute.selected"

<md-content layout-padding layout-xs="column">
    <md-checkbox md-ink-ripple="#2199FF" id="attr{{attribute.id}}" ng-model="attribute.selected">
        {{attribute.name}}
    </md-checkbox>

    <md-content layout-padding ng-repeat="property in attribute.properties">

        <md-input-container >
            <label>{{property.name}}</label>
            <input ng-disabled="attribute.selected" md-maxlength="{{property.maxLength}}" type="{{property.type}}" required name="{{property.name}}" ng-model="property.value">
            <div ng-messages="Required">
                <div ng-message="required">This is required.</div>
                <div ng-message="md-maxlength">Max {{property.maxLength}} digits</div>
            </div>
        </md-input-container>

    </md-content>
</md-content>
Mickaël VILLERS
  • 147
  • 8