Question

我有一个实例，我正在通过ngModel替换ngChange的值。每次更改后，光标会跳转到input字段的末尾（假设我将结果分配给相同的$scope变量。）
我想知道如何防止这种行为？

  $scope.compute1 = 0;
  $scope.compute2 = 10;

  $scope.math = function() {
    $scope.compute1 = parseInt($scope.compute1);
    $scope.compute2 = parseInt($scope.compute2);

    $scope.compute1 = parseInt($scope.compute1);
  };

fiddle

问题示例：如果用户输入1000.没关系。但是如果他们想要返回并通过添加5和6将数字更改为156000，那么实际上6将附加到结尾：15006。

Answer 1

两个建议：

1 为什么不使用数字输入。

<div ng-app='myApp'>
    <div ng-controller="myCtrl">
    <input id="compute1" ng-model="compute.c1" ng-change="math()" type="number"/>
    <input id="compute2" ng-model="compute.c2" ng-change="math()" type="number"/>
  </div>
</div>

2 双向数据绑定应始终与“点”表示法一起使用：

$scope.compute = {c1: 0, c2: 10};

$scope.math = function() {
  $scope.compute.c1 = parseInt($scope.compute.c1);
  $scope.compute.c2 = parseInt($scope.compute.c2);
};

并相应地更新您的html以使用ng-model =“compute.c1”等。

Answer 2

光标结束，因为我们使用parseInt修改数据。

我建议您在做完事情之前和之后存放插入位置，然后将其设置回来。

此示例可能对您有所帮助： Link

Answer 3

根据math()的作用，您可以使计算在模糊而非变化时进行。这样，只有当用户从输入中选择（或点击）时才会进行转换。

有关此示例，请参阅Angularjs: input[text] ngChange fires while the value is changing。

Answer 4

我刚刚编写了这个指令，它基本上允许你格式化文本并保持光标位置它不是完美的但是效果很好。只需确保返回format函数中的值，而不是实际更改值，并使用与常规ng-change相同的值：

.directive('ngChangeFormat', function() {
        return {
            restrict: 'A',
            require: '?ngModel',
            link: function(scope, element, attr, controller) {
                controller.$viewChangeListeners.push(function() {
                    var el = element[0];
                    var start = el.selectionStart;
                    var end = el.selectionEnd;
                    var originalValue = controller.$viewValue;
                    var formattedValue = scope.$eval(attr.ngChangeFormat);
                    controller.$setViewValue(formattedValue);
                    controller.$render();
                    if(start === originalValue.length)
                        el.setSelectionRange(formattedValue.length, formattedValue.length);
                    else
                        el.setSelectionRange(start, end);
                });
            }
        };
    })

Answer 5

非常快速和简单的修复程序，以延迟ng-model-options。我遇到了同样的问题，对我有用：在您的输入->

ng-model-options="{debounce: 750}"

使用ng-change（）输入光标位置跳转到结尾

5 个答案: