Angularjs 如何在启用和禁用多个复选框时设置ng模型null

我有多个复选框：- 客户：-

<md-checkbox aria-label="role master" ng-model="clients.allwd" class="md-primary md-hue-2" md-no-ink>Allowed</md-checkbox>

<md-checkbox aria-label="role master" ng-model="clients.add"  class="md-primary md-hue-2" ng-disabled="
        !clients.allwd">Add</md-checkbox>

<md-checkbox aria-label="role master" ng-model="clients.modify" class="md-primary md-hue-2" ng-disabled="
        !clients.allwd">Modify</md-checkbox>

<md-checkbox aria-label="role master" ng-model="clients.remove" class="md-primary md-hue-2" ng-disabled="
        !clients.allwd">Remove</md-checkbox>

<md-checkbox aria-label="role master" ng-model="clients.view" class="md-primary md-hue-2" ng-disabled="
        !clients.allwd">View</md-checkbox>

<md-checkbox aria-label="role master" ng-model="clients.export" class="md-primary md-hue-2" ng-disabled="
        !clients.allwd">Export</md-checkbox>

允许
添加
修改
去除
看法
出口

角色：-

<md-checkbox aria-label="role master" ng-model="roles.allwd" class="md-primary md-hue-2" md-no-ink>Allowed</md-checkbox>

    <md-checkbox aria-label="role master" ng-model="roles.add"  class="md-primary md-hue-2" ng-disabled="
            !roles.allwd">Add</md-checkbox>

    <md-checkbox aria-label="role master" ng-model="roles.modify" class="md-primary md-hue-2" ng-disabled="
            !roles.allwd">Modify</md-checkbox>

    <md-checkbox aria-label="role master" ng-model="roles.view" class="md-primary md-hue-2" ng-disabled="
            !roles.allwd">View</md-checkbox>

允许
添加
修改
看法

还有更多

如果单击“允许”，其他复选框将被启用，否则将被禁用。假设我选中了允许复选框，然后添加复选框，然后再次选中允许复选框，然后添加按钮将保持选中状态（即使已禁用）。我想要的是，如果我再次选中Allowed复选框，那么Add复选框应该设置为null。 一种方法是：-

scope.add=“”/null

。 但这不是一种有效的方法，因为我有多个复选框。

---

有没有一种方法可以用最少的代码实现这一点？

您可以创建如下对象：

<md-checkbox aria-label="role master" ng-model="checkbox.allwd" class="md-primary md-hue-2" md-no-ink>Allowed</md-checkbox>

<md-checkbox aria-label="role master" ng-model="checkbox.add"  class="md-primary md-hue-2" ng-disabled="
        !allwd">Add</md-checkbox>

之后，您可以在

$scope

上设置函数：

$scope.clearCheckboxes = () => {
  Object.keys($scope.checkbox).forEach(key=>{
    $scope.checkbox[key] = undefined;
  })
};

然后只需使用

ng click=“clearCheckboxes（）”

或控制器

$scope.clearCheckboxes（）

请记住，我没有时间进行上述测试，因此可能需要进行一些错误修复

如果多个组需要它，则可以扩展主对象，使其具有如下键：

$scope.checkboxes = {
    notClients: {
      allwd: true,
      add: false,
      modify: false,
      remove: false,
      view: false,
      export: false,
    },
    clients: {
      allwd: false,
      add: false,
      modify: false,
      remove: false,
      view: false,
      export: false,
    }
  };

然后还需要扩展clear功能：

$scope.clearCheckboxes = () => {
    Object.keys($scope.checkboxes).forEach(group => {
      Object.keys($scope.checkboxes[group]).forEach(key => {
        $scope.checkboxes[group][key] = false;
      });
    });
  };

下面是一个使用普通复选框的基本小提琴示例，这样您就可以玩并改进它：

---

我认为，使用与您相同的方法，您需要在允许的复选框切换上更改每个

ng型号。如果您遵循此链接上的第二个示例，可能还有另一种方法。上面的解决方案对一组复选框很有用，但我有多个复选框，所以这不是一个有效的方法。是的，但这很容易扩展以接受多个复选框-我更新了答案并添加了fiddle。
$scope.clearCheckboxes = () => {
    Object.keys($scope.checkboxes).forEach(group => {
      Object.keys($scope.checkboxes[group]).forEach(key => {
        $scope.checkboxes[group][key] = false;
      });
    });
  };