Question

我正在使用angularjs xeditable作为我表单中的一个字段。
的 PLUNKER LINK
我使用谷歌地图api自动完成添加商店。我可以添加任意多个。相应地更新城市和国家/地区字段，以及可以使用xeditable格式的地址字段。

问题是：

当我有多个商店，并且我想编辑地址字段（可以编辑）时，当我点击可编辑字段时，所有可编辑字段都会打开并进入编辑模式。
我怎样才能将其限制为单击而不是其他人？

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

Answer 1

上述行为的原因是您的ng-repeat在表单内。使用xeditable，您的一个元素应该是一个表单。如下更改您的代码，它将解决问题。

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

请注意，此处我们为每个ng-repeat项目提供单独的表格。

angular xeditable prevent onclick在编辑模式下打开所有字段

问题是：

1 个答案: