单击 ng-repeat 表单中的 angular 可编辑字段停止滚动到顶部

Question

当我单击由 ng-repeat 填充的表单中的可编辑字段之一时，表单滚动到顶部。

    <form editable-form name="myxedit">
        <fieldset ng-repeat="shop in myModel.shops track by $index">
            <h2>Map Test # {{$index + 1}}</h2>

            <div class="col-md-6 pac-card" id="pac-card">
                <input id="pac-input-{{$index}}" title="Search" type="text" ng-change="cityCode($index)" ng-model="shop.placeName" />
                <div>city is: {{shop.city}}</div>
                <div>country is: {{shop.country}}</div>
            </div>
            <div id="map_canvas-{{$index}}" style="height: 200px;width: 200px;"></div>
            <div class="form-group">
                <input id="radio-{{$index}}" type="checkbox" ng-model="shop.isFirst" name="firstShop" style="-webkit-appearance: radio;-moz-appearance: radio;-ms-appearance: radio;" ng-change="firstShopChange($index)">
                <label for="radio-{{$index}}">First Shop</label>
            </div>
            <div class="col-md-12">
                <div class="form-group" ng-if="myModel.shops.length > 1">
                    <span class="btn btn-danger pull-right" ng-click="removeShop($index)">Remove Shop</span>
                </div>
            </div>

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

我在每个 ng-repeat 中只有一个可编辑字段。
我怎样才能阻止它滚动到顶部？
如您所见，我正在按索引跟踪 ng-repeat，假设我单击由 ng-repeat 重复的第三个 fieldset 中的 xeditable 字段，表单滚动到顶部到第一个字段集中的 xeditable .

更新：

这里是 plunker。 https://plnkr.co/edit/y8UHwTHTxtxvQYSWICoh?p=preview
如果您添加更多商店，然后单击最后一家商店中的可编辑字段，表单将滚动到顶部，就会出现这种奇怪的行为。

Answer 1

发生这种情况是因为点击后，您的第一个输入字段获得焦点。我想 xeditable 中的函数 $form.$show() 正在这样做。尝试找到该代码并将其删除或尝试更改它以将注意力集中在您当前单击的输入字段上。

Answer 2

当您启用表单编辑时，它会滚动到第一个可编辑输入字段，我认为此功能是默认设置，因此我的建议是禁用除被单击的元素之外的所有可编辑元素。因此它不会滚动。此外，我还包含了一个将焦点设置到输入元素的函数，以便提供更好的用户体验。

问题： 在检查 angular 可编辑表格 documentation 时，我发现您使用的是 $form.show()，这是引起了一些问题，我严格遵守文档并重写了 HTML 它工作得很好。请在下面找到更新后的 fiddle.

请在下面的插件中找到一个工作示例

Plunkr

HTML:

<span e-name="erer" class="editable-click" ng-init="shop.disabled=false;" ng-click="shop.disabled=true;myxedit.$show();setFocus($event);" e-ng-disabled="!shop.disabled" ng-disabled="myxedit.$waiting" e-ng-blur="myxedit.$hide()" href editable-text="shop.address">
    {{ shop.address || 'empty' }}
</span>

JS:

$scope.setFocus = function(event){
      event.target.nextSibling.childNodes[0].childNodes[0].focus(); //selects the input element
}

单击 ng-repeat 表单中的 angular 可编辑字段停止滚动到顶部

stop scroll to top by clicking angular xeditable field in ng-repeat form

html

javascript

jquery

angularjs

angular-xeditable

更新：