Как смотреть переменную в инструкции switch?

Question

Как правильно добавить функцию $watch в сочетании с оператором switch? Я по существу пытаюсь создать одну переменную, которая работает для моих функций (IE: vm.clear()) и передать ее DOM на основе того, что выбрано (IE: A или B).

Итак, выбрав «A» и нажав vm.clear(), следует установить {{vm.A}} в 0, оставив {{vm.B}} самостоятельно. Также, выбрав «B» и нажав vm.clear(), следует установить {{vm.B}} в 0, оставив только {{vm.A}}.

<div ng-class="{selected:vm.selectedInput==='A'}" ng-click="vm.selectInput('A')">{{vm.A}}</div> 
<div ng-class="{selected:vm.selectedInput==='B'}" ng-click="vm.selectInput('B')">{{vm.B}}</div> 
<button ng-click="vm.clear()">Clear</button> 

.controller('MyCtrl', function($scope) { 
    var vm = this; 
    vm.selectedInput = 'A'; 
    vm.A = '5'; 
    vm.B = '6'; 

    vm.selectInput = function(input) { 
    vm.selectedInput = input; 
    switch (input) { 
     case 'A': 
     $scope.$watch('selectedOutput', function() { 
      vm.selectedOutput = vm.A; 
     }); 
     break; 
     case 'B': 
     $scope.$watch('selectedOutput', function() { 
      vm.B = vm.selectedOutput; 
     }); 
     break; 
    } 
    }; 

    vm.clear = function() { 
    vm.selectedOutput = '0'; 
    }; 

}); 

plunker

Answer 1

Если вы используете объект вместо значения для A & B вы можете избавиться от некоторых сложностей кода. Я добавил дополнительный объект под названием selections, но вы можете так же легко сделать это прямо на объекте vm. Мы добавляем свойство name к нашим двум объектам, чтобы вы могли получить имя в своем представлении.

<div ng-click="vm.selectInput('A')" ng-class="{selected:vm.selectedInput.name === 'A'}">{{vm.A}} Select me</div> 
<div ng-click="vm.selectInput('B')" ng-class="{selected:vm.selectedInput.name === 'B'}">{{vm.B}} Or me</div> 
<button ng-click="vm.clear()">Clear</button> 

.controller('MyCtrl', function() { 
    var vm = this; 
    vm.selections = { 
    A : { 
     name : 'A', 
     value : 5 
    }, 
    B: { 
     name: 'B', 
     value: 6 
    } 
    } 
    vm.selectedInput = vm.selections.A; 
    vm.selectInput = function(input) { 
    vm.selectedInput = vm.selections[input] 
    };  
    vm.clear = function() { 
    vm.selectedInput.value = '0'; 
    }; 
}); 

Plunkr

Используя объекты вашей возможности иметь несколько переменных, указывающие на тот же объект. Когда мы меняем значение свойства объекта, мы не затрагиваем ссылки на сам объект.

На рисунке ниже в первом случае у нас есть & b оба первоначально указывают на строку «lorem». Затем мы изменим a на точку на «ipsum», но b все еще смотрит на значение «lorem», так что теперь & b имеет два разных значения. Во втором случае у нас есть & b оба, глядя на объект. Хотя мы меняем значения свойств объекта, а & b все еще смотрят на один и тот же объект. Если бы мы сделали a={value:"ipsum"}, у нас был бы первый случай снова, так как они меняли а, чтобы посмотреть на новый объект.