ng-model - 空输入返回 null答案

【问题标题】：ng-model - Empty input returns nullng-model - 空输入返回 null
【发布时间】：2017-09-30 19:27:03
【问题描述】：

我有这个输入：

<input ng-model="data.value" type="number" placeholder="0" value="0">

当我更改输入（例如更改为 1）然后将其删除时，data.value 为空。我希望当我删除输入时 data.value 将保持 0 作为默认值。

我看到了这个解决方案： Angular ng-model: empty strings should be null

这个解决方案对我有用，但我想知道是否还有其他没有 $watch 或 ng-change 功能的解决方案。

提前致谢！

【问题讨论】：

我认为最简洁的方法是创建一个需要 ng-model 的自定义属性指令，然后应用一个自定义解析器将值转换为 0，这在您链接到的解决方案中提到。跨度>
但在这种情况下，它会将其设置为 0。如果我将有一些其他输入并且对于每个输入我想要其他默认值，我将需要有很多指令。 @Strille
谁告诉你需要很多指令，只需创建一个指令并将其调用到你想要的所有文本框。
我投票结束这个问题，因为他已经找到了最好的解决方案
我相信当您清除输入 type="number" 时，它会变为空。就我而言，我有 ng-min="1" 和 ng-max="1000" 并且我想清除该字段以使其无效并触发我的验证消息。您认为我应该尝试使用 ng-change 并自己手动设置错误吗？

标签： javascript angularjs angular-ngmodel angularjs-ng-model

【解决方案1】：

如果我将有一些其他输入并且对于每个输入我想要其他默认值，我将需要有很多指令

您可以有一个defaultValue attr 用于在使用 HTML 中的指令时提供的指令。像这样的：

.directive('emptyToDefault', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        scope: {
          defaultValue: '='
        },
        link: function (scope, elem, attrs, ctrl) {
            ctrl.$parsers.push(function(viewValue) {
                if(viewValue === null) {
                    return scope.defaultValue || 0;
                }
                return viewValue;
            });
        }
    };
});

现在您可以轻松地从外部传递不同的默认值，并在字符串清空时设置它。

HTML 就像，

<input ng-model="data.value" type="number" placeholder="0" value="0" 
       empty-to-default default-value="5">

working plunker（打开控制台注意它如何设置默认值5，因为字符串被清空并且传递的值是5）

【讨论】：

【解决方案2】：

这个解决方案对我有用，但我想知道是否有没有 $watch 的其他解决方案

你发现的link，也有使用$watch的解决方案

如果你想使用ng-change

试试这个

<input ng-model="data.value" type="number" ng-change="defaultValue()" 
placeholder="0" value="0">

// 控制器

$scope.defaultValue=function()
{
  if($scope.data.value==null || $scope.data.value==='')
  {
    $scope.data.value=0;
  }
}

但Directive 是比其他选项最好的方法之一

【讨论】：