ng-disabled not affecting input enabled/disabled when being changed

S Rosam Published at Dev

S Rosam

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>

Mickaël VILLERS

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>

Collected from the Internet

Please contact [email protected] to delete if infringement.