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>