Angularjs - 当确认对话框为假时如何取消下拉更改事件?

2022-01-15 00:00:00 html-select dialog angularjs javascript

我正在使用 Angularjs.我的问题是当我在下拉列表中选择一个新选项时，会出现一个对话框.如果对话框的结果为 false，则选择的下拉选项必须相同.将分析从其他开发人员那里获得的想法.提前谢谢！

I am using Angularjs. My problem is when I select a new option in my dropdown, a dialog will appear. If the result of the dialog is false, the selected dropdown option must be the same. Getting ideas from other devs will be analyzed. Thank you in advance!

请参阅下面的代码片段:

Refer to my code snippet below:

<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>

推荐答案

这里有一个你可能不知道的技巧:

Here is a trick you may not know:

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

当调用 dialog() 时，您可以将之前选择的选项作为参数传递.

When calling dialog(), you can pass as a param the previous selected option.

然后，如果对话框被取消，只需回滚它.

Then, just rollback it if the dialog is cancelled.

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>

相关文章