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

标签 javascript angularjs dialog html-select

<分区>

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

最佳答案

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

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

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

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

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>

关于javascript - Angularjs - 如何在确认对话框为 false 时取消下拉菜单中的更改事件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45051160/

上一篇：javascript - 函数 'callAfter' 的实现，允许在指定的持续时间后调用任何函数

下一篇：javascript - jspdf默认 'a4'格式的像素宽度和长度是多少？

相关文章：

javascript - 过渡不适用于 translate3d

angularjs - 更改 ng 文件上传的 Content-Type

angularjs - 在所有 $http 异步调用完成后加载路由模板/ Controller

javascript - AngularJS 排除过滤器？

android - 通过 findFragmentByTag 从 FragmentManager 获取 DialogFragment

c++ - Windows 上使用 C++ 的异步对话框

javascript - Angular 过滤器排除元素

javascript - 如何设置textShadow属性

javascript - 从另一个组件访问 viewchild

vba - Excel VBA : How To Disable Protected Sheet Dialog On Keydown