禁用 ng 时取消选中复选框 AngularJS

Question

我有一个包含三个角色的下拉菜单：

超级管理员
管理员
用户

还有这个设置一些额外权限的复选框

给予额外权限。

我想要实现的是：当在下拉列表中选择用户角色时，该复选框将被禁用和取消选中。我已经设法禁用它，但如果事先已检查过它，那么在禁用时它会保持检查状态。

这是我的代码：

$scope.model = {
    role: '',
    roles: ['Super Admin', 'Admin', 'User'],
    givePrivileges: false
}

HTML:

<md-input-container>
    <label>Role</label>
    <md-select ng-model="model.role">
        <md-option ng-repeat="role in model.roles" ng-value="role">
            {{role}}
        </md-option>
    </md-select>
</md-input-container>
<md-input-container>
    <md-checkbox ng-disabled="model.role === 'User'">
        Give extra privileges
    </md-checkbox>
</md-input-container>

Answer 1

首先，您的 md-checkbox 上缺少一个 ng-model。您可以将 givePrivileges 变量与 md-checkbox 绑定。然后就可以写一个关于role值的watch语句了。并根据需要更新 givePrivileges 变量。

HTML

 <md-checkbox ng-modal="modal.givePrivileges" ng-disabled="model.role === 'User'">
        Give extra privileges
 </md-checkbox>

JS

$scope.$watch('model.role', function (newVal, oldVal) {
    if (newVal && newVal !== oldVal) {
        if (newVal === ''User) {
            $scope.model.givePrivileges = false;
        }
    }
});

Answer 2

首先，分配 ng-model：

<md-checkbox ng-model="model.givePrivileges" ng-disabled="model.role === 'User'">
    Give extra privileges
</md-checkbox>

然后处理下拉变化：

<md-select ng-model="model.role" ng-change="handleRoleChange()">
    <md-option ng-repeat="role in model.roles" ng-value="role">
        {{role}}
    </md-option>
</md-select>

在控制器中：

$scope.handleRoleChange = function () {
    if ($scope.model.role === 'User') {
        $scope.model.givePrivileges = false;
    }
};

禁用 ng 时取消选中复选框 AngularJS

Uncheck a checkbox when it is ng-disabled AngularJS

angularjs

checkbox

dropdown

angularjs-ng-disabled