如何在启用和禁用多个复选框时设置ng-model null

Question

我有一组复选框： - 客户端： -

<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。但这不是一种有效的方法，因为我有多个复选框。有没有办法用最少的代码实现这一目标？

Answer 1

你可以创建像这样的对象：

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

然后在$ onInit中，如果需要，可以使用值初始化复选框对象 - 这不是必需的：

$scope.checkbox = {
allwd: false,
add: false,
modify: false,
remove: false,
view: false,
export: false,
};

之后你可以在$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,
    }
  };

然后你还需要扩展清晰的功能：

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

这是使用普通复选框的基本小提琴示例，因此您可以玩并改进它：

https://jsfiddle.net/pegla/ak0dgwdu/1/