AngularJS label change when input field's readonly property changes


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>
<input ng-model="someObject.value" ng-if="!someObject.allowEdit" ng-readonly="true"/>
Problem courtesy of: Kaizar Laxmidhar


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>
            <input ng-model="" ng-hide="item.allowEdit"/>
            <input ng-model="" ng-show="item.allowEdit" ng-readonly="true"/>

Here is a Fiddle

Solution courtesy of: mainguy


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

<label>Field Label {{someObject.allowEdit ? " *" : ""}}</label>
Discussion courtesy of: Kaizar Laxmidhar

This recipe can be found in it's original form on Stack Over Flow.