javascript - 通过单击 ng-repeat 形式的 Angular xeditable 字段停止滚动到顶部

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 字段第一个字段集。

更新:

这是骗子。 https://plnkr.co/edit/y8UHwTHTxtxvQYSWICoh?p=preview
如果您添加更多商店，然后单击最后一个商店中的可编辑字段，则可以看到这种奇怪的行为，并且表单将滚动到顶部。

Answer 1

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

问题:检查 Angular 可编辑表单 documentation ，我发现您正在使用 $form.show()，这导致了一些问题，我严格遵守文档并重写了 HTML，它效果很好。请在下面找到更新的 fiddle 。

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

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
}