AngularJS复选框勾选/取消时计数不更新问题求助

我来帮你搞定这个AngularJS复选框计数的问题～ 从你给出的代码片段来看，大概率是控制器绑定、事件触发或者计数逻辑这几个环节出了问题，我给你整理了完整的可运行方案，一步步来：

核心问题排查点 #

你遇到的不生效情况，通常是这几个原因：

• 控制器没正确注册到ng-app指定的模块里
• 没有用ng-change触发计数更新逻辑
• 计数变量没初始化或者绑定错误

完整修正代码 #

HTML部分（补全后）

<html ng-app="controllers">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  <script src="controllers.js"></script>
</head>
<body ng-controller="CheckCtrl">
  <h3>复选框计数演示</h3>
  <!-- 每个复选框绑定独立的ng-model，并用ng-change触发更新 -->
  <label>
    <input type="checkbox" ng-model="checkItem1" ng-change="updateCount(checkItem1)"> 选项1
  </label>
  <br>
  <label>
    <input type="checkbox" ng-model="checkItem2" ng-change="updateCount(checkItem2)"> 选项2
  </label>
  <br>
  <label>
    <input type="checkbox" ng-model="checkItem3" ng-change="updateCount(checkItem3)"> 选项3
  </label>
  <!-- 实时显示计数 -->
  <p>当前选中数量：<strong>{{ count }}</strong></p>
</body>
</html>

controllers.js部分（完整代码）

// 注册和ng-app同名的模块
angular.module('controllers', [])
// 定义控制器，绑定到页面的ng-controller
.controller('CheckCtrl', function($scope) {
  // 初始化计数为0，避免undefined导致的异常
  $scope.count = 0;

  // 定义计数更新函数，接收复选框的选中状态
  $scope.updateCount = function(isChecked) {
    // 选中加1，取消减1
    $scope.count += isChecked ? 1 : -1;
  };
});

关键细节解释 #

1. 模块与控制器绑定：确保ng-app="controllers"和JS里的angular.module('controllers', [])模块名完全一致，控制器必须注册到这个模块下才能生效
2. ng-controller绑定：在body或父元素上添加ng-controller="CheckCtrl"，这样页面才能访问控制器里的$scope变量和函数
3. ng-change触发：每个复选框用ng-change调用updateCount，并把当前的选中状态（ng-model的值）传进去，这样才能实时响应勾选/取消操作
4. 计数逻辑：用三元表达式简洁处理增减，确保选中时加1，取消时减1
5. 实时显示：p标签里的{{ count }}会自动绑定$scope.count的值，AngularJS会帮你实时更新DOM

如果之前的代码是漏掉了以上某个环节，按照这个方案调整后应该就能正常工作啦～

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