0

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.

The problem is:

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>
Bonnard
  • 389
  • 2
  • 8
  • 26

1 Answers1

0

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.

Kavindra
  • 1,697
  • 2
  • 14
  • 19
  • but i have a lot of other fields in my form, what should i do with them? – Bonnard Aug 26 '17 at 09:20
  • They should be a separate form. But you should have separate `editable-form` for each ng-repeat item. – Kavindra Aug 26 '17 at 09:23
  • please have a look at my plunker, and you will see that i can't scatter my form here and there. i have one form and one of the fields inside the ng-repeat should be xeditable. i can't separate it from the rest. could you give a working plunker according to your solution? – Bonnard Aug 26 '17 at 09:41