我具有三个角色的下拉菜单:
此复选框设置了一些额外的权限
我要实现的是: 在下拉菜单中选择“用户”角色后,该复选框将同时被禁用和未选中。我设法禁用了它,但是如果事先对其进行了检查,那么在禁用时它仍然保持选中状态。
这是我的代码:
$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>
答案 0 :(得分: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;
}
};
答案 1 :(得分:1)
首先,您在md-checkbox上缺少ng-model。您可以将GivePrivileges变量与md-checkbox绑定。然后,您可以编写有关角色值的监视语句。并根据需要更新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;
}
}
});