Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular dropdown confirmation before ng-change

Tags:

angularjs

I have a dropdownlist and need to cancel the ng-change event if user does not want to proceed. The previousPortfolioId value is setting correctly in the $scope but the view is still displaying the changed value. I tried $scope.$apply also, but not working. How do I cancel the ng-change event?

Template.html

<select style="width:200px;" ng-model="SelectedPortfolioId" ng-change="PortfolioSelectionChange(SelectedPortfolioId)" ng-options="Portfolio.BlendId as Portfolio.BlendName for Portfolio in Portfolios">
</select>

Controller.js

$scope.PortfolioSelectionChange = function (SelectedPortfolioId) {
var previousPortfolioId = $scope.SelectedPortfolioId;
if ($scope.IsPageDirty) {
    var promise = DisplayConfirmation('Your unsaved changes will be lost. Do you want to continue?');
    promise.done(function () {
     // do something 
    });

        promise.fail(function () {
                // cancel the change
            $scope.SelectedPortfolioId = previousPortfolioId;
        });
    }
};
like image 243
Regi Mani Avatar asked Nov 01 '22 18:11

Regi Mani


1 Answers

I actually don't like my answer (I was here looking for a better one!), but as far as I can see there's nothing like an event.cancel you can call. Editing the variable during its change event just doesn't seem to take, so what I ended up doing was passing $timeout to my controller and queueing the change:

    promise.fail(function () {
        // cancel the change
        $timeout(function () {
             $scope.SelectedPortfolioId = previousPortfolioId;
        }, 0);
    });
like image 132
Chris Rae Avatar answered Nov 15 '22 07:11

Chris Rae