AngularJS如何移除默认值0及使用双重否定实现两数求和

问题1：如何在AngularJS中移除默认的0值？ #

在AngularJS里，默认0值大多出现在ng-model绑定的变量初始设为0，或者输入框自动显示0的场景。要搞定这个，我整理了几个实用的方法：

• 初始化变量为undefined而非0：如果是控制器里绑定的变量，别一开始就设成0，直接设为undefined或者干脆不赋值（默认就是undefined）就行。举个例子：

  angular.module('myApp', [])
    .controller('myCtrl', function($scope) {
      $scope.num1 = undefined;
      $scope.num2 = undefined;
    });
  

  这样绑定到输入框时，输入框就是空的，不会默认显示0。

• 用ng-init在模板里初始化空值：要是你习惯在模板里处理初始化，直接用ng-init把变量设为空字符串就行：

  <input type="number" ng-model="num" ng-init="num=''">
  

• 自定义指令做精细化控制：如果需要更灵活的处理（比如输入框失去焦点时，要是内容是0就自动清空），可以写个简单的指令：

  angular.module('myApp').directive('removeDefaultZero', function() {
    return {
      link: function(scope, elem) {
        elem.on('blur', function() {
          if (elem.val() === '0') {
            elem.val('');
            scope.$apply(function() {
              scope[elem.attr('ng-model')] = undefined;
            });
          }
        });
      }
    };
  });
  

  然后在输入框上用上这个指令：

  <input type="number" ng-model="num" remove-default-zero>
  

问题2：使用双重否定实现AngularJS两数求和 #

双重否定(!!)在这里的核心作用，是把空值、undefined、null这类“假值”转换成布尔值false，再转一次变成true，配合+号就能把布尔值转成数字（+true是1，+false是0）。这样就能保证输入框为空时，自动当作0来计算求和，不会出现NaN的问题。

具体实现看下面的代码：

控制器代码 #

angular.module('sumApp', [])
  .controller('sumCtrl', function($scope) {
    // 初始化两个变量为undefined，避免默认显示0
    $scope.firstNum = undefined;
    $scope.secondNum = undefined;

    // 用双重否定处理空值，转成0后求和
    $scope.getSum = function() {
      // 逻辑：如果是假值，就用0；否则用输入的数字
      var num1 = !!$scope.firstNum ? +$scope.firstNum : 0;
      var num2 = !!$scope.secondNum ? +$scope.secondNum : 0;
      // 或者更简洁的写法：+($scope.firstNum || 0)，不过双重否定的方式更明确针对空字符串场景
      return num1 + num2;
    };
  });

模板代码 #

<div ng-app="sumApp" ng-controller="sumCtrl">
  <div>
    第一个数：<input type="number" ng-model="firstNum">
  </div>
  <div>
    第二个数：<input type="number" ng-model="secondNum">
  </div>
  <div>
    求和：<span>{{ getSum() }}</span>
  </div>
</div>

简单解释下：当输入框为空时，$scope.firstNum是undefined，!!undefined返回false，所以num1会被设为0；如果输入了数字，!!数字返回true，就用输入的数字来计算。这样不管输入框有没有值，求和都能正常运行~

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