Angularjs - 当确认对话框为false时如何取消下拉菜单中的更改事件？

Question

我正在使用Angularjs。我的问题是当我在下拉列表中选择一个新选项时，会出现一个对话框。如果对话框的结果为false，则所选下拉选项必须相同。从其他开发者那里获得创意将被分析。先谢谢你！

请参阅我下面的代码片段：

<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) { 
 
    \t  alert("Option must not change"); 
 
      /** The problem is the dropdown still select the option. **/ 
 
     } 
 
    } 
 
}); 
 
</script>

Answer 1

这里有一个窍门，你可能不知道：

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

当调用dialog()，你可以通过一个PARAM先前选择的选项。

然后，只要回滚它，如果对话框被取消。

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>