2014-07-10 5 views
0
내가 양식에 대한 AngularJS와 함께 X-편집 가능한 사용하고

를 사용숨기기 편집 가능한 텍스트 속성 조건부 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> 

두 가지 기준이있다 한 사용자는 모든 필드와 다른 경우 사용자에있을 것를 업데이트 할 수 있어야있어서, 역할 편집, 즉 역할 선택 만 허용됨.
실제 문제는 양식 요소를 특정 조건에 따라 편집/편집 할 수 없게 만드는 것입니다. 편집 가능한 텍스트를 모든 필드에서 수동으로 제거하면 두 번째 기준을 충족시킵니다. 조건에 따라 편집 가능한 텍스트를 추가 할 수있는 방법이 있습니까?
누구든지 유용한 아이디어가 있습니까? 그들이 깨끗하게 분리되지 않는 JQuery와 및 AngularJS와 혼합하는 것은 좋은 방법이 아닙니다 사전

+1

조건에 따라 속성을 추가 할 지시어를 만드는 방법은 무엇입니까? 그러나 저는 x-editable에 대한 지식이 없습니다. –

답변

0

감사합니다. 나는 당신이보고 싶지 추측입니다 -

+0

답장을 보내 주셔서 감사합니다. 나는 그 링크를 더 일찍 지나쳤습니다. 내 실제 문제는 양식 요소를 특정 조건에 따라 편집/편집 할 수 없게 만드는 것입니다. – Abhishek

+0

원한다면 x-editable을 사용할 필요가 없습니다. 조건에 읽기 전용 속성과 같은 것이 문제를 해결해야합니다. https://docs.angularjs.org/api/ng/directive/ngReadonly –

2

http://vitalets.github.io/angular-xeditable/ 나는 늦게 알아하지만 난 나 자신의 당신이 전자를 제외하고 전자 메일의 수정을 허용하지 않으 가정 해 봅시다 예를 들어

을 같은 직면 한 - 메일은 예입니다 기본 하나

<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을 사용하여 모든 종류의 문제에 부딪 힐 수 있습니다.