javascript - switch - ng-style background color

Angularjs: ¿cómo cancelar el evento de cambio en el menú desplegable cuando el diálogo de confirmación es falso?

Question

Estoy usando Angularjs. Mi problema es que cuando selecciono una nueva opción en mi menú desplegable, aparecerá un cuadro de diálogo. Si el resultado del diálogo es falso, la opción desplegable seleccionada debe ser la misma. Obtener ideas de otros desarrolladores será analizado. ¡Gracias de antemano!

Consulte mi fragmento de código a continuación:

<div ng-app="myApp" ng-controller="myCtrl">
  <select ng-model="myDropDown" ng-change="Dialog()">
    <option>a</option>
    <option>b</option>
  </select>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
var app = angular.module(''myApp'', []);
app.controller(''myCtrl'', function($scope) {
    $scope.Dialog = function () {
        var dialog = confirm(''Continue?'');
        if(!dialog) {
         alert("Option must not change");
            /** The problem is the dropdown still select the option. **/
        }
    }
});
</script>

Answer 1

Aquí hay un truco que quizás no sepas:

ng-change="dialog(myDropDown)"         // pass the NEW value of myDropDown
ng-change="dialog(''{{myDropDown}}'')"   // pass the OLD value of myDropDown

Al llamar a dialog() , puede pasar como parámetro la opción seleccionada anterior.

Luego, simplemente deshaga si el diálogo se cancela.

var app = angular.module(''myApp'', []);

app.controller(''myCtrl'', function($scope) {
    $scope.dialog = function(prev) {
        var dialog = confirm(''Continue?'');
        if(!dialog) {
            $scope.myDropDown = prev;
            alert("Option must not change");
        }
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
  <select ng-model="myDropDown" ng-change="dialog(''{{myDropDown}}'')">
    <option>a</option>
    <option>b</option>
  </select>
</div>