使用AngularJS有条件地隐藏可编辑文本属性

Question

我在表单中使用X-Editable和AngularJS

<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>  

有两个标准，一个是允许用户更新所有字段，另一个是用户只能编辑角色，即选择角色。

我的实际问题是，如何根据特定条件将表单元素设置为可编辑/不可编辑。如果我手动从所有字段中删除可编辑文本，它将满足第二个条件。有没有办法添加基于条件的可编辑文本？

有人有什么有用的建议吗？

提前感谢

Answer 1

我知道为时已晚，但我自己也曾面对过同样的情况

例如，假设您不想允许修改电子邮件，除非该电子邮件是默认电子邮件

<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>

这只是一个例子，但我相信你可以激励自己

Answer 2

混合使用jquery和angularjs并不是一种好的做法，除非它们被完全分开。我猜你想看看这个-- http://vitalets.github.io/angular-xeditable/

Answer 3

我相信写一个新的指令是正确的方式。例如，如果与ng-repeat结合使用，您可能会在使用ng-if时遇到各种问题。