CODEWITHSUNDEEP
javascripthtmlangularjsng-show
shredMER
shredMER

Reputation: 227

AngularJS ng-show Not Working?

I am trying to change my UI (ON LOAD) based on whether or not a token is present. I would like to show and hide my login div and my form div based on whether or not the token is present. For whatever reason, I cannot get ng-show to work. To simplify the problem I have the following:

https://jsfiddle.net/m1q7h9fn/3/

HTML

<div ng-app="nh-launch">
    <div ng-show="loginView">
        <h1>Login</h1>
    </div>

    <div ng-show="formView">
        <h1>Form</h1>
    </div>
</div>

JS

angular.module('nh-launch',[]).run(function($scope) {

var token = "valid";

    if (token == "valid") {
        $scope.loginView = false;
        $scope.formView = true;
        $scope.$apply();
    }
    else {
        $scope.loginView = true;
        $scope.formView = false;
        $scope.$apply();
    }

});

Upvotes: 0

Views: 1139

Answers (4)

Rabi
Rabi

Reputation: 2220

you don't need a separate controller (although you should use a controller and scope in real-world program).

You can inject the $rootscope. $scope.$apply is not required.

I have tweaked your code https://jsfiddle.net/m1q7h9fn/8/

Upvotes: 0

Emir Marques
Emir Marques

Reputation: 2687

Change run to controller as:

angular.module('nh-launch', []).controller('launch-controller', function($scope) {
    /* This run when page load... */
    $scope.loginView = false;
    $scope.formView = true;
    
    $scope.changeView = function() {
        /* This run when click button */
        $scope.token = ($scope.token == "valid" ? "" : "valid");
        $scope.loginView = $scope.token == "valid";
        $scope.formView = $scope.token != "valid";
    };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="nh-launch" ng-controller="launch-controller">
  <button type="button" ng-click="changeView();">Change</button>
  <div ng-show="loginView">
    <h1>Login</h1>
  </div>

  <div ng-show="formView">
    <h1>Form</h1>
  </div>
</div>

Upvotes: 3

Richard Hamilton
Richard Hamilton

Reputation: 26434

In MVC frameworks like AngularJS, the model ($scope) ties to the view. The glue connecting the two is the controller. That's why $scope variables should be declared in the controller. I would reorganize your code as follows

angular.module('nh-launch',[])
   .controller('myCtrl', ['$scope', function($scope) {

        var token = "valid";

        if (token == "valid") {
            $scope.loginView = false;
            $scope.formView = true;
            $scope.$apply();
        }
        else {
            $scope.loginView = true;
            $scope.formView = false;
            $scope.$apply();
        }

    }]);

And then create a reference to the controller with the ng-controller attribute. Your HTML should look as follows

<div ng-app="nh-launch">
  <div ng-controller="myCtrl">
    <div ng-show="loginView">
        <h1>Login</h1>
    </div>

    <div ng-show="formView">
        <h1>Form</h1>
    </div>
  </div>
</div>

Upvotes: 1

Rama Rao M
Rama Rao M

Reputation: 3051

There must be a controller which should be bound with View. So the following code will help you to get: 

  <div ng-app="nh-launch">
    <div ng-controller="LoginCtrl">
        <div ng-show="loginView">
            <h1>Login</h1>
        </div>

        <div ng-show="formView">
            <h1>Form</h1>
        </div>
    </div>
    </div>
<script>
    angular.module('nh-launch',[]).controller('LoginCtrl',function($scope) {

        var token = "valid";

        if (token == "valid") {
            $scope.loginView = false;
            $scope.formView = true;
            $scope.$apply();
        }
        else {
            $scope.loginView = true;
            $scope.formView = false;
            $scope.$apply();
        }

    });
</script>

Upvotes: 0

Related Questions