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