CODEWITHSUNDEEP
javascriptangularjs
Gaurav123
Gaurav123

Reputation: 5209

ng-hide doesn't removed from class even when ng-show is true

Requirement : To Show and Hide a div.

HTML 

<div ng-show="IsSuccess">
  My Div Content
 </div>

HTML after page load

<div class="ng-hide" ng-show="false">

HTML after updated from controller (http post call)

 <div class="ng-hide" ng-show="true">

ng-show is true but still class contains ng-hide

How to resolve this issue ?

For reference, below is my controller

myController.controller('AuthenticationController',
    function AuthenticationController($scope, $location, authDataService, loginDuration) {
        $scope.Login = {};
        $scope.IsSuccess= false;

        $scope.login = function () {
            authDataService.authenticateUser($scope.Login, $scope).then(
                        function (status) {
                            if (status === 200) {
                                if ($scope.message == 'Login failed') {
                                    $scope.IsSuccess= true;
                                }
                                else {
                                    $scope.IsSuccess= false;
                                }
                            }
                        },
                        function (data) {
                            $scope.ErrorMessage = data.Message;
                        }

                    );
        }
    });

Upvotes: 0

Views: 3346

Answers (3)

fewcodes
fewcodes

Reputation: 321

HTML code:

<button class="show-more-btn ng-hide" ng-show="hasMoreItemsToShow()" ng-click="showMoreItems()"">Show More</button>

Javascript code:

setTimeout(function(){ $('.show-more-btn').removeClass('ng-hide'); 
       }, 3000);

Upvotes: -1

Mike Richards
Mike Richards

Reputation: 5667

Because authDataService.authenticateUser is returning a promise that looks like it's outside of the angular context, angular doesn't know when the scope changes. In that situation, you need to add $scope.$apply()

if ($scope.message == 'Login failed') {
    scope.IsSuccess= true;
}
else {
    $scope.IsSuccess= false;
}

$scope.$apply();

** Edit: Extended Explanation **

Because you asked for more details about this, I'll try to explain a little further.

$scope.$apply() needs to be called when outside of the angular context. Here's what I mean by outside of the angular context:

$scope.login = function() {

    // inside angular context
    console.log('a');

    setTimeout(function() {

        // outside angular context
        console.log('b');
        $scope.hello = 'b';

        // $scope.$apply() needs to be called
        $scope.$apply();

    }, 1000);

    // inside angular context
    console.log('c');
    $scope.hello = 'c';

};

In this example, here's the output to the log:

a
c 
// $scope.$apply() is assumed at this point
b

Angular knows it needs to adjust its bindings after the last line of $scope.login() is processed, and so $scope.$apply() is assumed then, but Angular doesn't know if you have any other callback functions that might be called later on through another context, another context being setTimeout or jQuery's $.ajax or $.Deferred, etc. If that different context modifies the $scope, then you need to call $scope.$apply() to manually update the Angular bindings.

Upvotes: 2

Max Pringle
Max Pringle

Reputation: 37

If I am understanding your question correctly, I would change your HTML to show <div ng-hide="IsSuccess"> My Div Content </div>

and then in your angular file 

$scope.login = function () {
    if(<!-- logic to hide or show-->){
        $scope.IsSuccess = false;
    }else{
        $scope.IsSuccess = true; 
    }             
}

Hopefully this helps.

Upvotes: 0

Related Questions