AngularJS label change when input field's readonly property changes

Question

I have an input field which could be enabled or disabled depending on the condition. Its corresponding label has '*' to indicate that the input field is mandatory. Currently the '*' is displayed all the time which should only be displayed when the input field is editable.

<label>Field Label *</label>
<input ng-model="someObject.value" ng-if="!someObject.allowEdit" ng-readonly="true"/>

I am trying to add condition that if the input field is readonly then don't show '*', for that, I am doing something as below but I don't know how to check the input field's readonly property with angularJS.

<label>Field Label 
    <div style="display:inline" ng-show="[if inupt field.readonly == false]">*</div>
</label>
<input ng-model="someObject.value" ng-if="!someObject.allowEdit" ng-readonly="true"/>

a jsfiddle would be appreciated..

iJade
– iJade

2014-06-12 11:25:34 +00:00
Commented Jun 12, 2014 at 11:25 — iJade
– iJade, Commented Jun 12, 2014 at 11:25

mainguy · Accepted Answer · 2014-06-12 14:56:31Z

1

Try this:

    <div ng-controller="MyCtrl">
        <div ng-repeat="item in data">
            <label>Field Label 
                <span style="display:inline" ng-show="!item.allowEdit">*</span>
                <span style="display:inline" ng-show="item.allowEdit">&nbsp;</span>
            </label>
            <input ng-model="item.name" ng-hide="item.allowEdit"/>
            <input ng-model="item.name" ng-show="item.allowEdit" ng-readonly="true"/>
        </div>
    </div>

Here is a Fiddle

answered Jun 12, 2014 at 14:56

mainguy

8,3312 gold badges34 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kaizar Laxmidhar · Accepted Answer · 2014-06-12 16:18:48Z

1

At the end I have come up with this solution which is more succinct.

<label>Field Label {{someObject.allowEdit ? " *" : ""}}</label>

answered Jun 12, 2014 at 16:18

Kaizar Laxmidhar

8692 gold badges18 silver badges39 bronze badges

Collectives™ on Stack Overflow

AngularJS label change when input field's readonly property changes

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related