Question

我正在使用ng-model进行输入。但是当有人在输入框中输入无效数字时，我想保留原始值。我怎样才能做到这一点？这里是吸血鬼： http://plnkr.co/edit/wX7n0jBn1Ek1py4DJHqT?p=preview

在输入框中，我使用ng-model绑定值。我还指定了输入的类型为数字。

<input type="number" name="input" ng-model="example.value" min="0" max="99" required>

但是当我改变输入时，ng-model也会改变。我可以延迟此ng模型更改，直到数字有效吗？或者我可以使用ng-change来实现这一目标吗？但是，当您更改输入时，ng模型似乎会发生变化，因此ng-change无法捕获原始值。

为了说清楚，我在这里有一个例子：

如果当前的ng-model是10，那么我输入50.它将改为50.然后我输入5000并且它将变为5000。

如果当前的ng-model为10，我输入＆＃39; aaa＆＃39;，它将返回10.

我想问的部分是如何制作ng-model的副本，因为我可以在此输入框中使用onchange时设置ng-model。

Answer 1

输入您正确验证模型的输入类型编号，您需要检查表单是否有效。使用Angular here查看验证。

要仅在输入松散焦点后更改值，请使用ng-model-options，输入应如下所示：

<input type="number" name="input" ng-model="example.value" min="0" max="99" required ng-model-options="{ updateOn: 'blur' }">

Answer 2

你总是可以创建指令来存储最后一个有效值，只需添加解析器：

ngModelCtrl.$parsers.push(function(val) {
  if (val) {
     stored = val;
     console.log(stored);
  }
  return val;
});

然后，当您需要时，您可以将值恢复为上一个有效值。示例插件： http://plnkr.co/edit/XCacrP3Ij4ZCgyYYaoIa?p=preview

Answer 3

我不知道你想用它实现什么，最好在表格有效之前禁用保存按钮。

返回旧值会产生更多问题，说当前值为10，我改为50，表示有效并更改了值，进一步我输入为5000，要返回哪个值，10,5或50？

$scope.$watch('example.value', function(newValue, oldValue) {
     if(newValue != oldValue){
       //validate
       if(!valid)
           $scope.example.value = oldValue;
     }
   });

如何在ng-model有效后更改ng-model

3 个答案: