Question

我想了解下面代码段的行为。

预期：

当您点击复选框时，它应在myData（val3 / val4）中添加一个属性，其值与复选框的值相同。

实际：

当您选中第二个复选框时，其工作正常，但是当您取消选中第一个时，它不会插入val3值false。它只会在再次检查时插入val3。

＆＃13;

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

＆＃13;

<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>

＆＃13;

为什么会出现这种行为？

Answer 1

官方文档明确规定避免在ng-model中使用ng-checked。 Link

请注意，此指令不应与ngModel一起使用，因为这可能会导致意外行为。

特殊指令是必要的，因为我们不能使用插值   在checked属性中。有关更多信息，请参见插值指南   资讯

我伤口建议这样做 - 不分离复选框状态和模型。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Angular ngChecked默认为true，阻止更改/点击事件？

1 个答案: