在其他复选框 ng-model 的基础上更新复选框值的 ng-model 值答案

【问题标题】：Update ng-model value of checkbox value on the basis of other checkbox ng-model在其他复选框 ng-model 的基础上更新复选框值的 ng-model 值
【发布时间】：2018-02-16 21:25:00
【问题描述】：

我正在尝试在其他复选框的基础上更新一个复选框。

这是我启用的第一个复选框，用户可以更改其值；

<label>
  <input type="checkbox" id="chkAddVerification" name="chkAddVerification" 
  ng-model="chkAddVerification" ng-checked="chkAddVerification">
  Add Verification
</label>

这是根据第一个复选框值禁用和更新的第二个复选框；

<label>
   <input type="checkbox" id="chkSendCodeByEmail" name="chkSendCodeByEmail" 
   ng-model="chkSendCodeByEmail" ng-disabled="true" ng-checked="chkAddVerification">
   By Email
</label>

这就是我尝试将第一个复选框 ng-model 值绑定到第二个复选框 ng-checked 的方式：ng-checked="chkAddVerification"

显然它工作正常（根据第一个检查/取消检查第二个），但它不会更新 ng-model 第二个复选框的值。

如果我选中第一个复选框 chkAddVerification，第二个复选框也会相应地进行检查，但 ng-model chkSendCodeByEmail 中包含错误值。

我在这里缺少什么？

【问题讨论】：

标签： javascript angularjs checkbox

【解决方案1】：

ng-model 和 ng-checked 不能一起使用。你可以使用 ng-change 来做同样的事情

<label>
  <input type="checkbox" id="chkAddVerification" name="chkAddVerification" 
  ng-model="chkAddVerification" ng-change="chkSendCodeByEmail = chkAddVerification">
  Add Verification
</label>

<label>
   <input type="checkbox" id="chkSendCodeByEmail" name="chkSendCodeByEmail" 
   ng-model="chkSendCodeByEmail" ng-disabled="true">
   By Email
</label>

工作示例http://jsfiddle.net/U3pVM/36066/

【讨论】：

“ng-model 和 ng-checked 应该一起使用”是什么意思？

【解决方案2】：

// Code goes here

angular.module('demo', []);
angular.module('demo').controller('ModalDemoCtrl', function () {
 
});

<!doctype html>
<html ng-app="demo">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
  </head>
  <body>

<div ng-controller="ModalDemoCtrl" class="modal-demo">
   <label>
  <input type="checkbox" id="chkAddVerification" name="chkAddVerification" 
  ng-model="chkAddVerification" ng-click="chkSendCodeByEmail=chkAddVerification">
  Add Verification,{{chkAddVerification}}
</label>
<label>
   <input type="checkbox" id="chkSendCodeByEmail" name="chkSendCodeByEmail" 
   ng-model="chkSendCodeByEmail" ng-disabled="true">
   By Email,{{chkSendCodeByEmail}}
</label>
</div>
  </body>
</html>

应用时，ng-click="chkSendCodeByEmail=chkAddVerification"其他模态值将被更新。

<label>
  <input type="checkbox" id="chkAddVerification" name="chkAddVerification" 
  ng-model="chkAddVerification" ng-click="chkSendCodeByEmail=chkAddVerification">
  Add Verification
</label>
<label>
   <input type="checkbox" id="chkSendCodeByEmail" name="chkSendCodeByEmail" 
   ng-model="chkSendCodeByEmail" ng-disabled="true">
   By Email
</label>

【讨论】：

这也会在点击第一个复选框时改变第二个复选框的模型
但它不检查第二个复选框
我在上面创建了一个sn-p，你可以运行它