AngularJS中ng-checked搭配ng-change从选中到未选中时失效问题

你的问题根源在于同时使用ng-model和ng-checked导致的状态冲突，而且ng-model绑定的字段也不对，下面是具体的解决方案：

问题分析 #

你当前的代码中，ng-model绑定的是question.questionId（这是一个标识ID，并非布尔值），而ng-checked依赖的是question.active。AngularJS中ng-model是双向绑定，会优先控制复选框的状态，这就导致视图的选中状态和模型值完全脱节——取消选中时，question.questionId根本不会变化，所以ng-change自然不会触发。

修复代码 #

把ng-model直接绑定到question.active，同时移除ng-checked（因为ng-model会自动同步复选框的选中状态）：

<label class="switch">
  <input type="checkbox" 
         ng-model="question.active" 
         ng-change="questionStatusChange(question.questionId, question.active)">
  <span class="slider round"></span>
</label>

控制器代码不需要修改，因为现在ng-change传递的question.active就是切换后的最新状态：

$scope.questionStatusChange = function(questionId, status) {
  console.log(status); // 选中时输出true，取消选中时输出false
}

为什么这样有效？ #

• ng-model="question.active"会让复选框的选中状态和question.active双向同步：点击复选框时，question.active会自动更新为对应的布尔值（true/false）。
• ng-change会在模型值更新后触发，此时传递的question.active就是切换后的真实状态，无论选中还是取消选中都会正常触发回调。

内容的提问来源于stack exchange，提问作者Mr world wide