0

当我单击表单中由 填充的可编辑字段之一时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，假设我点击了第三个fieldset由 ng-repeat 重复的 xeditable 字段，表单滚动到顶部到第一个字段集中的 xeditable。

更新：

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

4

2 回答 2

2

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

问题：在检查 angular xeditable formsdocumentation时，我发现您使用的是 $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
}
于 2017-08-27T06:53:52.847 回答
1

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

于 2017-08-27T04:59:23.790 回答