Angular ngCheck默認情況下爲true，阻止更改/點擊事件？

Question

我想了解下面的代碼段的行爲。

預計：

當你點擊一個複選框，它應該添加在myData具有相同的複選框的值的屬性（val3/val4）。

實際：

當您檢查第二個複選框，其工作正常，但如果沒有選擇第一，它不與false值插入val3。再次檢查時，它只插入val3。

angular.module('myApp', []) 
 
    .controller('MyController', ['$scope', 
 
    function($scope) { 
 
     $scope.myData = { 
 
     val1: true, 
 
     val2: false 
 
     }; 
 
    } 
 
    ]);

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 
 
<div ng-app="myApp"> 
 
    <form ng-controller="MyController"> 
 
    MyData : 
 
    {{myData}}<br/> 
 
    <label>Val1: 
 
     <input type="checkbox" 
 
      ng-checked="myData.val1" 
 
      ng-model="myData.val3"> 
 
    </label><br/> 
 
    <label>Val2: 
 
     <input type="checkbox" 
 
      ng-checked="myData.val2" 
 
      ng-model="myData.val4"> 
 
    </label><br/> 
 

 
    val1 = {{myData.val1}}<br/> 
 
    val2 = {{myData.val2}}<br/> 
 
    val3 = {{myData.val3}}<br/> 
 
    val4 = {{myData.val4}}<br/> 
 
    </form> 
 
</div>

爲什麼這樣的行爲？

Answer 1

官方文檔明確規定避免使用ng-model檢查ng-model。 Link

請注意，此指令不應與ngModel一起使用，因爲這可能會導致意外行爲。

一個特殊的指令是必要的，因爲我們不能在checked屬性中使用插值 。有關更多 信息，請參閱插值指南。

我的傷口建議這樣做 - 沒有分開復選框狀態和模型。

angular.module('myApp', []) 
 
    .controller('MyController', ['$scope', 
 
    function($scope) { 
 
     $scope.myData = { 
 
     val1: true, 
 
     val2: false 
 
     }; 
 
    } 
 
    ]);

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 
 
<div ng-app="myApp"> 
 
    <form ng-controller="MyController"> 
 
    MyData : 
 
    {{myData}}<br/> 
 
    <label>Val1: 
 
     <input type="checkbox" 
 
      ng-model="myData.val1"> 
 
    </label><br/> 
 
    <label>Val2: 
 
     <input type="checkbox" 
 
      ng-model="myData.val2"> 
 
    </label><br/> 
 

 
    val1 = {{myData.val1}}<br/> 
 
    val2 = {{myData.val2}}<br/> 
 
    </form> 
 
</div>