Hide editable-text attribute conditionally using A

Question

I am using X-Editable with AngularJS for Form

<form editable-form name="userform" onaftersave="submitUser()">
                    <table class="user_table">
                        <tr class="userrow name">
                            <td class="info">First Name</td>
                            <td class="desc">
                                <span editable-text="curuser.firstName" e-name="firstName" e-maxlength="25">{{curuser.firstName}}</span>
                            </td>
                        </tr>
                        <tr class="userrow email">
                            <td class="info">E-Mail</td>
                            <td class="desc">
                                <span editable-email="curuser.email" e-name="email" e-maxlength="48">{{curuser.email}}</span>
                            </td>
                        </tr>
                        <tr class="userrow authority">
                            <td class="info">Role</td>
                            <td class="desc user-roles">
                                <span editable-select="roleUpdated" e-name="roles" e-ng-options="role as role.name for role in roles" onaftersave="updateRole(curuser, roleUpdated)">{{ showRoles() }}</span>
                                    {{ showRoles() }}
                                </span>
                            </td>
                        </tr>
                        <tr ng-if="curuser.id == null" class="userrow command">
                            <td class="info"></td>
                            <td class="desc">
                                <button type="submit" class="submit_button btn btn-primary" ng-show="!readonly && !amanager">Submit</button>
                            </td>
                        </tr>
                    </table>
                </form>  

There are two criteria, one wherein user should be allowed to update all fields and other where in user will be allowed only to edit role i.e. Select Role.
My actual problem is that how can form elements be made editable/non-editable based on a specific condition. If I remove editable-text manually from all fields it satisfies second criteria. Is there any way I can add editable-text based on condition.
Anyone have any helpful ideas?

Thanks in Advance

Answer 1

Writing a new directive would be the right way to do it I believe. You would possibly run into all sorts of issues using ng-if, if combined with ng-repeat for instance.

Answer 2

I know that's late but I've faced the same myself

for example let's say you don't want to allow modification of e-mail unless the e-mail is the default one

<span editable-email="curuser.email" e-name="email" e-maxlength="48" ng-if="curuser.email=='Enter an e-mail'">
{{curuser.email}}
</span>

<span e-name="email" e-maxlength="48" ng-if="curuser.email != 'Enter an e-mail'">
{{curuser.email}}
</span>

that's just an example but i'm sure you can inspire yourself

Answer 3

It is not a good practice to mix jquery and angularjs unless they are cleanly separated. I am guessing you want to look at this - http://vitalets.github.io/angular-xeditable/