Angular中隐藏文件ng-model及checkbox取值NaN问题排查

嘿，我来帮你搞定这个问题！你的核心问题出在没有给复选框添加ng-model指令，这导致$scope.chk_mail根本没和复选框建立双向绑定，自然是undefined，转成Number后就变成NaN了。下面一步步给你修正：

1. 修正复选框的HTML代码 #

首先，给复选框加上ng-model，同时移除多余的ng-value（复选框不需要这个属性，ng-model已经负责值的绑定了）：

<input class="form-check-input deflog-check" type="checkbox" 
       ng-model="chk_mail"
       ng-true-value="1" 
       ng-false-value="0">

这里注意：ng-true-value和ng-false-value的规范写法是短横线分隔（AngularJS指令的标准命名），不过驼峰式ngTrueValue也能识别，但推荐用标准写法。

2. 初始化$scope变量避免undefined #

在你的控制器里，提前初始化$scope.chk_mail的默认值，这样即使复选框没被操作，变量也不会是undefined：

// 在控制器初始化时设置默认值（比如默认未勾选）
$scope.chk_mail = 0;

3. 正确获取并计算值 #

现在$scope.chk_mail会根据复选框的状态自动变成"1"或"0"（字符串类型），转成Number就不会是NaN了。如果你是想计算两次值（比如你的代码里写的相加），可以这样写：

// 现在转换不会得到NaN了
$scope.object2Edit.notificacion = Number($scope.chk_mail) + Number($scope.chk_mail);
// 或者更简洁的写法：Number($scope.chk_mail) * 2

完整示例 #

控制器代码 #

angular.module('yourAppName', [])
.controller('yourControllerName', function($scope) {
  // 初始化变量
  $scope.chk_mail = 0;
  $scope.object2Edit = { notificacion: 0 }; // 初始化object2Edit
  
  // 比如在点击事件或其他逻辑里更新值
  $scope.updateNotificacion = function() {
    $scope.object2Edit.notificacion = Number($scope.chk_mail) * 2;
  };
});

HTML代码 #

<div ng-app="yourAppName" ng-controller="yourControllerName">
  <input class="form-check-input deflog-check" type="checkbox" 
         ng-model="chk_mail"
         ng-true-value="1" 
         ng-false-value="0">
  <button ng-click="updateNotificacion()">更新通知值</button>
  <p>当前复选框绑定值: {{chk_mail}}</p>
  <p>计算后的notificacion值: {{object2Edit.notificacion}}</p>
</div>

关键总结 #

• 没有ng-model就没有双向绑定，$scope变量会是undefined，转Number必然得到NaN
• 移除多余的ng-value，复选框的绑定只需要ng-model配合ng-true-value/ng-false-value
• 初始化变量是个好习惯，能避免很多undefined相关的问题

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