Как я могу сохранить и изменить переменную JS из md-switch в HTML?

Question

Итак, у меня есть этот md-переключатель с AngularJS и HTML:

<md-switch class="md-primary" ng-model="vm.status">
  {{vm.status ? "Image." : "Text."}} 
</md-switch> 

И у меня есть vm.text = "Activated" в качестве значения по умолчанию в контроллере JS. Но я не знаю, как сделать так, чтобы после того, как пользователь нажал на переключатель, он изменил значение vm.text на «Деактивировано». В двух словах речь идет об изменении кода JS из HTML.

кода контроллера:

angular
    .module('NewApp')
    .controller('MessageTemplateDialogController', MessageTemplateDialogController);

MessageTemplateDialogController.$inject = ['$scope', '$stateParams', '$uibModalInstance', 'MessageTemplate', 'JhiLanguageService'];

function MessageTemplateDialogController ($scope, $stateParams, $uibModalInstance, MessageTemplate, JhiLanguageService) {
    var vm = this;

    vm.isSaving = false;

    vm.text = 'Activated';

    vm.phoneTemplates = [];
    vm.phoneTemplate = vm.newTemplate('PHONE');
    loadAllPhoneTemplates(true);

    function loadAllPhoneTemplates(selectFirst) {
        MessageTemplate.findAll({type: 'PHONE'}, function(response) {
            vm.phoneTemplates = response;
            vm.phoneTotalItems = response.length;
        });
    }
}

Answer 1

Один из подходов заключается в использовании директивы ng-change:

<md-switch class="md-primary" ng-model="vm.status" ng-change="vm.onStatusChange()">
  {{vm.status ? "Image." : "Text."}} 
</md-switch> 

В контроллере:

vm.text = 'Activated';

vm.onStatusChange= function () {
    vm.text = vm.status ? 'Deactivated' : 'Activated';
}

Для получения дополнительной информации см.

• AngularJS Справочник по API Директивы по изменению нг