2014-07-10 16 views
0

我使用X-编辑与AngularJS的形式隐藏可编辑的文本属性有条件地使用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> 

有两个标准,一个其中应允许用户更新所有字段和其他地方的用户会只允许编辑角色,即选择角色。
我的实际问题是,如何根据特定条件将表单元素设置为可编辑/不可编辑。 如果我从所有字段中手动删除可编辑文本,它会满足第二个标准。有什么方法可以根据条件添加可编辑文本。
任何人有任何有帮助的想法?

由于提前

+1

如果要在基于条件添加属性的地方创建指令,那该怎么办?但是,我不知道x-editable。 –

回答

0

它不是,除非它们被分离干净混合jQuery和angularjs一个很好的做法。我猜你想看看这个 - http://vitalets.github.io/angular-xeditable/

+0

谢谢你的回复。我早些时候浏览了该链接。我的实际问题是,如何根据特定条件将表单元素编辑/不可编辑。 – Abhishek

+0

如果你只是想这样做,你不必使用x-editable。像条件只读属性readonly应该解决您的问题https://docs.angularjs.org/api/ng/directive/ngReadonly –

2

我知道的晚,但我面临着同样的自己

例如,让我们说你不想让电子邮件,除非电子修改-mail是默认的一个

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

这只是一个例子,但我敢肯定,你可以激发自己

0

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