I am using angularjs xeditable for one of the fields in my form.
PLUNKER LINK
I add shops using google maps api autocomplete. I can add as many as I want. City and country fields get updated accordingly, and also the address field, which is in xeditable format.
When I have multiple shops, and I want to edit the address field (which is xeditable), when I click on the xeditable field, all of the xeditable fields open up and go on edit mode.
How can I only limit it to the one clicked and not others?
<form editable-form name="myxedit">
<fieldset ng-repeat="shop in myModel.shops track by $index">
...
<div>
<span e-name="erer" class="editable-click" ng-click="$form.$show()" ng-disabled="myxedit.$waiting" e-ng-blur="$form.$hide()" href="#" editable-text="shop.address">
{{ shop.address || 'empty' }}
</span>
<span ng-show="myxedit.$visible">
<button type="submit" class="btn btn-primary" ng-disabled="myxedit.$waiting">
<span class="glyphicon glyphicon-ok"></span>
</button>
<button type="button" class="btn btn-default" ng-disabled="myxedit.$waiting" ng-click="myxedit.$cancel()">
<span class="glyphicon glyphicon-remove"></span>
</button>
</span>
</div>
...
</fieldset>
</form>
The reason for above behaviour is that your ng-repeat is inside the form. With xeditable, your one element should be one form. Change your code as follows and it will fix the problem.
<div>
<span e-name="erer" class="editable-click" ng-click="$form.$show()" ng-disabled="myxedit.$waiting" e-ng-blur="$form.$hide()" href="#" editable-text="shop.address">
{{ shop.address || 'empty' }}
</span>
<form editable-form name="myxedit">
<span ng-show="myxedit.$visible">
<button type="submit" class="btn btn-primary" ng-disabled="myxedit.$waiting">
<span class="glyphicon glyphicon-ok"></span>
</button>
<button type="button" class="btn btn-default" ng-disabled="myxedit.$waiting" ng-click="myxedit.$cancel()">
<span class="glyphicon glyphicon-remove"></span>
</button>
</span>
</form>
</div>
Please note that here we have separate form for each ng-repeat item.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.