2017-07-12 3 views
4

Ich benutze Angularjs. Mein Problem ist, wenn ich eine neue Option in meinem Dropdown-Menü auswähle, erscheint ein Dialog. Wenn das Ergebnis des Dialogs falsch ist, muss die ausgewählte Dropdown-Option identisch sein. Ideen von anderen Entwicklern werden analysiert. Vielen Dank im Voraus!Angularjs - Wie ändere ich ein Change Event im Dropdown, wenn der Bestätigungsdialog falsch ist?

Siehe mein Code-Snippet:

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

Antwort

6

Hier ist ein Trick ist, können Sie nicht wissen:

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

Wenn dialog() Aufruf, den Sie als param passieren kann die vorherige ausgewählte Option.

Dann nur Rollback es, wenn der Dialog abgebrochen wird.

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>

+1

Nizza Trick! Danke dafür! –

Verwandte Themen