Hide editable-text attribute conditionally using AngularJS

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

What about creating a directive where you would add the attribute(s) based upon a condition? However, I have no knowledge of x-editable. — Matt M
– Matt M, Commented Jul 10, 2014 at 20:42

Eagle1 · Accepted Answer · 2014-08-23 16:35:19Z

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

answered Aug 23, 2014 at 16:35

Eagle1

8102 gold badges13 silver badges31 bronze badges

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

Comments

Nikhil Baliga · Accepted Answer · 2014-07-10 16:22:54Z

0

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/

answered Jul 10, 2014 at 16:22

Nikhil Baliga

1,35113 silver badges20 bronze badges

2 Comments

Abhishek Over a year ago

Thank you for reply. I went through that link earlier. My actual problem is that how can form elements be made editable/non-editable based on a specific condition.

Nikhil Baliga Over a year ago

If you just want that, you don't have to use x-editable. Something like Attribute readonly on condition should solBe your problem docs.angularjs.org/api/ng/directive/ngReadonly

Pim · Accepted Answer · 2014-10-01 13:15:39Z

0

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.

answered Oct 1, 2014 at 13:15

Pim

8961 gold badge9 silver badges18 bronze badges

Collectives™ on Stack Overflow

Hide editable-text attribute conditionally using AngularJS

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related