Changing image by select in Angularjs X-editable

Question

I am using angular x-editable, and my code is as follows

   <li ng-repeat="emailId in emailDetails">
       <img class="permission"
            ng-src="assets/images/profile-ima.jpg"
            editable-select="emailId.privacy_type"
            e-form="rowform"
            e-name="privacy_type"
            e-ng-options="q.privacy_id as q.privacy_type for q in privacyTypes">
       </img>
       <div class="pfDetails"
            editable-text="emailId.email"
            e-form="rowform"
            e-name="email"
            ng-click="rowform.$show()"
           onbeforesave="checkEmail($data)">
           {{ emailId.email || 'Edit' }}
      </div>
      <div class="addIcon" ng-click="addEmail()"></div>
   </li>

When I click the .pfDetails div Edit option will enable. I can change the emailid that's fine. More fields can be added by .addIcon div.

My Issue is How can I change the .permission field's ng-src for each and every new div. If I change the value it reflects in all the new img field because of same class name.

Can anyone help me to resolve this?

Answer 1

This is too little code to give more than a guessed answer.

I usually use this approach:

   <img ng-if"emailId.privacy_type=='a'" class="permission"
        ng-src="assets/images/profile-ima.jpg"
        editable-select="emailId.privacy_type"
        e-form="rowform"
        e-name="privacy_type"
        e-ng-options="q.privacy_id as q.privacy_type for q in privacyTypes">
   </img>
   <img ng-if"emailId.privacy_type=='b'" class="permission"
        ng-src="assets/images/profile-imb.jpg"
        editable-select="emailId.privacy_type"
        e-form="rowform"
        e-name="privacy_type"
        e-ng-options="q.privacy_id as q.privacy_type for q in privacyTypes">
   </img>

and so forth ...

A better way would be to name you images so that they match the privacy type partially:

   <img class="permission"
        ng-src="assets/images/profile-im{{emailId.privacy_type}}.jpg"
        editable-select="emailId.privacy_type"
        e-form="rowform"
        e-name="privacy_type"
        e-ng-options="q.privacy_id as q.privacy_type for q in privacyTypes">
   </img>

So:

when privacy_type= 'a' ng-src will be profile-ima.jpg

when privacy_type= 'b' ng-src will be profile-imb.jpg

But thats just guesswork, since i don't know your data.