当NG模型设置为false时，仍然检查了肮脏的复选框

Question

我有一个简单的问题，但我不知道如何在AngularJs 1.4中解决它。基本上，我有一个带有1个复选框和1个按钮的表格。该按钮应取消选中复选框，并将布尔变量(复选框的NG模型(设置为False。

但是，当用户检查复选框时(复选框状态很脏(，我不能喜欢此，并且按钮无法做任何事情来取消选中此复选框。p>解决这个问题的想法？

<button ng-click="uncheckCheckbox()">uncheck</button> 
<input type="checkbox"  ng-model="displayWMSLayer" ng-change="showWMSLayerOnGlobe(displayWMSLayer)"/>

粗糙的JavaScript代码显示什么功能：

function uncheckCheckbox() {
    $scope.displayWMSLayer = false;
    alert("Checkbox is unchecked automatically");
}
function showWMSLayerOnGlobe(status) {
    if (status) {
       alert("Checkbox is checked manually");
    } else {
       alert("Checkbox is unchecked manually");
    }
}

Answer 1

尝试像这样使用

JS

$scope.checkboxModel = {
  displayWMSLayer: false  
};

html

<input type="checkbox"  ng-model="checkboxModel.displayWMSLayer" ng-change="showWMSLayerOnGlobe(checkboxModel.displayWMSLayer)"/>

Answer 2

如果我正确理解您的问题，您只想有一个按钮来取消选中复选框。

如果我是正确的，那你为什么不尝试这样？

html： -

 <div ng-app>
  <div ng-controller="TodoCtrl">
   <button ng-click="uncheck()">uncheck</button> 
<input type="checkbox"  ng-model="displayWMSLayer"/>
  </div>
</div>

JS： -

function TodoCtrl($scope) {
    $scope.displayWMSLayer = false;
    $scope.uncheck=function(){
        $scope.displayWMSLayer=$scope.displayWMSLayer?$scope.displayWMSLayer=false:$scope.displayWMSLayer;
        }
}