Question

当我点击表单中填充了ng-repeat的其中一个xeditable字段时，表单会滚动到顶部。

    <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中只有一个xeditable字段。
如何阻止它滚动到顶部？
正如你可以看到我通过索引跟踪ng-repeat，假设我点击了第三个fieldset中由ng-repeat重复的xeditable字段，表单在第一个字段集中滚动到顶部xeditable

更新

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

Answer 1

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

问题：在检查角度xeditable表单documentation时，我发现您使用的是$ form.show（），这导致了一些问题，我严格遵守文档和重写了它非常有用的HTML。请在下面找到更新的小提琴。

请在下面的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
}

Answer 2

发生这种情况是因为点击后，您的第一个输入字段会获得焦点。我想函数$ form。在xeditable中的$ show（）就是这么做的。尝试找到该代码并消除它或尝试更改它以关注当前单击的输入字段。

通过单击ng-repeat形式

更新

2 个答案: