0

我正在为表单中的一个字段使用 angularjs xeditable。
PLUNKER LINK
我使用谷歌地图 api 自动完成添加商店。我可以根据需要添加任意数量。城市和国家字段会相应更新，地址字段也是可编辑格式。

问题是：

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

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

1 回答 1

0

上述行为的原因是您的 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 项目提供了单独的表格。

于 2017-08-26T08:36:39.890 回答