Angular中如何隐藏ng-model的默认作用域值？

看起来你是想让绑定了ng-model的输入框默认不显示初始的0值，但背后的计算逻辑依然能使用0来进行运算对吧？我给你几个实用的解决方案，你可以根据自己的需求选择：

方案1：修改作用域变量初始值，计算时做容错处理 #

最简单的方式就是把控制器里的初始值从0改成undefined（或者直接不赋值，默认就是undefined），这样输入框默认会是空的。然后在getTotal方法里，对每个变量做容错判断，如果是undefined或者空值，就当作0来计算：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.getTotal = function() {
    // 对每个变量做容错：空/undefined时取0
    const o = Number($scope.o) || 0;
    const p = Number($scope.p) || 0;
    const q = Number($scope.q) || 0;
    const r = Number($scope.r) || 0;
    const s = Number($scope.s) || 0;
    const t = Number($scope.t) || 0;
    
    return 10 * o + 10 * p + 10 * q + 10 * r + 10 * s + 10 * t;
  }
  
  // 初始不赋值，输入框默认为空
  $scope.o;
  $scope.p;
  $scope.q;
  $scope.r;
  $scope.s;
  $scope.t;
});

这样修改后，输入框一开始是空的，用户输入数字后会正常绑定；即使清空输入框，计算时也会用0来参与运算，完全不影响你的getTotal逻辑。

方案2：自定义指令处理模型与视图的转换（更优雅） #

如果不想修改控制器里的初始值（比如你需要这些变量在其他地方依然保持初始0），可以写一个自定义指令，专门处理“模型值为0时输入框显示为空，输入框为空时模型值设为0”的逻辑：

首先在你的模块里添加这个指令：

app.directive('hideZero', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
      // 模型转视图：当模型值是0时，输入框显示空字符串
      ngModel.$formatters.push(function(value) {
        return value === 0 ? '' : value;
      });

      // 视图转模型：当输入框为空时，把模型值设为0
      ngModel.$parsers.push(function(value) {
        return value === '' ? 0 : Number(value);
      });
    }
  };
});

然后在你的HTML输入框上添加这个指令：

<td><input type="number" class="hobbit" style="width:60px;margin:6px;" ng-model="t" hide-zero></td>
<!-- 其他需要隐藏默认0的输入框，都加上hide-zero指令即可 -->

这种方式的好处是：控制器里的变量依然保持初始0，不影响其他业务逻辑；输入框默认显示为空，用户体验更好；而且指令可以复用在所有需要这个功能的输入框上，代码更干净易维护。

小提示 #

因为你用的是type="number"的输入框，浏览器会自动限制用户输入非数字内容，所以不需要额外处理非法输入的情况，非常省心。

内容的提问来源于stack exchange，提问作者user8910784