Снимите флажок, если он отключен ng AngularJS

Question

У меня есть этот выпадающий список с тремя ролями:

1. Супер Админ
2. Администратор
3. Пользователь

И этот флажок, который устанавливает некоторые дополнительные привилегии

• Дайте дополнительные привилегии.

Чего я хочу достичь, так это: Когда в раскрывающемся списке выбрана роль пользователя, флажок ОБА отключен и не отмечен. Мне удалось отключить его, но если он был предварительно проверен, то он остается проверенным при отключении.

Вот мой код:

$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

Сначала назначьте ng-модель:

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

Answer 2

Сначала вам не хватает ng-модели на вашем md-флажке. Вы можете связать переменную givePrivileges с помощью флажка md. Тогда вы можете написать заявление о значении роли. и при необходимости измените переменную 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;
        }
    }
});