AngularJS 1.4中设置ng-model为false后Dirty复选框仍选中

这个问题我之前在项目里也碰到过，AngularJS 1.4里当用户手动勾选复选框让控件变成$dirty状态后，直接修改绑定的布尔值有时候确实会出现视图不同步的情况，下面给你两个实用的解决办法，附完整代码示例：

解决方案1：手动同步ngModel的视图与模型 #

核心思路是在修改绑定变量的同时，强制调用ngModel控件的方法来同步视图状态，确保复选框能正确取消选中：

HTML代码 #

<div ng-app="myApp" ng-controller="MyController">
  <form name="myForm">
    <button ng-click="uncheckCheckbox()">uncheck</button>
    <input type="checkbox" ng-model="isChecked" ng-ref="checkboxCtrl" name="myCheckbox">
    <p>当前选中状态: {{isChecked}}</p>
    <p>控件状态（是否已修改）: {{myForm.myCheckbox.$dirty}}</p>
  </form>
</div>

控制器代码 #

angular.module('myApp', [])
.controller('MyController', ['$scope', function($scope) {
  // 初始化复选框状态
  $scope.isChecked = false;

  $scope.uncheckCheckbox = function() {
    // 1. 先修改绑定的模型变量
    $scope.isChecked = false;
    
    // 2. 强制同步视图与模型
    if ($scope.checkboxCtrl) {
      $scope.checkboxCtrl.$setViewValue(false);
      $scope.checkboxCtrl.$render();
      
      // 可选：如果需要把控件重置为"未修改"状态，加上下面两行
      $scope.checkboxCtrl.$setPristine();
      $scope.checkboxCtrl.$setUntouched();
    }
  };
}]);

解决方案2：使用控制器As语法避免作用域问题 #

有时候视图不同步是因为作用域继承导致的变量更新没有传递到视图，用控制器As语法可以避免这个问题，代码更健壮：

HTML代码 #

<div ng-app="myApp" ng-controller="MyController as vm">
  <form name="myForm">
    <button ng-click="vm.uncheckCheckbox()">uncheck</button>
    <input type="checkbox" ng-model="vm.isChecked" name="myCheckbox">
    <p>当前选中状态: {{vm.isChecked}}</p>
    <p>控件状态（是否已修改）: {{myForm.myCheckbox.$dirty}}</p>
  </form>
</div>

控制器代码 #

angular.module('myApp', [])
.controller('MyController', function() {
  var vm = this;
  vm.isChecked = false;

  vm.uncheckCheckbox = function() {
    vm.isChecked = false;
    
    // 获取ngModel控制器实例
    var checkboxElement = document.querySelector('[name="myCheckbox"]');
    var checkboxCtrl = angular.element(checkboxElement).controller('ngModel');
    
    if (checkboxCtrl) {
      checkboxCtrl.$setViewValue(false);
      checkboxCtrl.$render();
      checkboxCtrl.$setPristine();
      checkboxCtrl.$setUntouched();
    }
  };
});

问题原因解释 #

在AngularJS 1.4中，当用户手动交互复选框后，控件会被标记为$dirty（已修改）和$touched（已触碰）状态，此时AngularJS的内部表单验证机制可能会干扰模型值到视图的自动同步。通过手动调用$setViewValue(false)设置视图值，再用$render()强制渲染控件，就能绕过这个干扰，确保复选框状态和模型值一致。

内容的提问来源于stack exchange，提问作者Bằng Rikimaru