Search code examples
angularjssweetalertsweetalert2

Angularjs variable value is not updating first time with sweetAlert is success


I used AngularJS v1.5.3 & vendor.bundle.js and app.bundle.js

in this click to show button and display swal confirm box and i pressed to 'Yes, display it!' button and div is not display but, i press second time then display this div, i mean $scope.displayDiv value is changing but no any effects of first time please give me solution

Here i paste my code:

<div class="input-group" ng-show="displayDiv" >
        DOM data
</div>
<button class="" ng-click="disDiv()">Show</button>


    $scope.displayDiv=0;
    $scope.disDiv = function() {
            swal({
                title: 'Are you sure?',
                text: "You won't to display",
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, display it!',
                cancelButtonText: 'No, cancel!',
                confirmButtonClass: 'btn btn-success',
                cancelButtonClass: 'btn btn-danger',
                buttonsStyling: false
            }).then(function() {
                $scope.displayDiv=1;
            });
        };

Solution

  • Try with below function may be help.

    <div class="input-group" ng-show="displayDiv" >
            DOM data
    </div>
    <button class="" ng-click="disDiv()">Show</button>
    
    
        $scope.displayDiv=0;
        $scope.disDiv = function() {
                swal({
                    title: 'Are you sure?',
                    text: "You won't to display",
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, display it!',
                    cancelButtonText: 'No, cancel!',
                    confirmButtonClass: 'btn btn-success',
                    cancelButtonClass: 'btn btn-danger',
                    buttonsStyling: false
                }).then(function() {
                    $scope.$apply(function () {
                            $scope.displayDiv=1;
                        });
                });
            };
    

    I have add below function in .then

    $scope.$apply(function () { $scope.displayDiv=1; });