CODEWITHSUNDEEP
javascriptangularjs
david raja
david raja

Reputation: 87

angular ng-show doesn't work

I trying this in angular. I working in version 1.4.5 and it's not working, only show the element termsinfo and in the others don't do anything. If someone can help me, i post the code in a simulation for try it.

// Code goes here
var app = angular.module('app',[]);
app.controller('legalController', function ($timeout, $scope) {
    $scope.termsinfo = true;
    $scope.cookiesinfo = false;
    $scope.privacy = false;
    $timeout(function () {
        $scope.terms = function () {
            $scope.termsinfo = true;
            $scope.cookiesinfo = false;
            $scope.privacy = false;
        }
        $scope.cookies = function () {
            $scope.termsinfo = false;
            $scope.cookiesinfo = true;
            $scope.privacy = false;
        }
        $scope.private = function () {
            $scope.termsinfo = false;
            $scope.cookiesinfo = false;
            $scope.privacy = true;
        }
    });
  
});
<!DOCTYPE html>
<html>

  <head>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <link href="style.css" rel="stylesheet" />
    <script src="script.js"></script>
  </head>

  <body ng-app="app" ng-controller="legalController">
    <div id="splash">
    <div id="intro-container">
        <h1>legal</h1>
        <h3>Find legal information and resourcesservices</h3>
    </div>

    <div id="splash-overlay"></div>
</div>
<div id="legal-sections">
    <div id="switcher">
        <ul>
            <li><a id="open-terms-use" ng-click="terms()">Terms of Use</a></li>
<!--            <li><a id="open-security">Security</a></li>-->
            <li><a id="open-cookies" ng-click="cookies()">Cookies Policy</a></li>
            <li><a id="open-private" ng-click="private()">Private Policy</a></li>
        </ul>
    </div>
    <div id="terms-use" ng-show="termsinfo">
        <section>
            <div class="container">
                <div class="Ehl-Page-Header">
                    <h1 class="h2">Terms of use</h1>
                </div></div>

        </section>
    </div>
    <div id="security">
    </div>
    <div id="cookies" style="display: none;" ng-show="cookiesinfo">
        <div>
            <section class="clear container-fluid" id="Cookies-Top">
                <div class="Bg-Mask"></div>
                <div class="container">
                    <h1 class="h2">Cookies</h1>
                </div>
  
            </section>
        </div>
    </div>
    <div id="private-policy" style="display: none;"  ng-show="privacy">
        <div>
            <section>
                <div class="container">
                <div class="Ehl-Page-Header">
                    <h1 class="h2">Privacy</h1>
                </div></div>
            </section>
        
    </div>
</div>
</div>
  </body>

</html>

Upvotes: 1

Views: 553

Answers (4)

Punith Mithra
Punith Mithra

Reputation: 628

remove style="display: none;" this will be implicitly added by ng-show id expression is false.

<!DOCTYPE html>
<html>

  <head>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <link href="style.css" rel="stylesheet" />
    <script src="script.js"></script>
  </head>

  <body ng-app="app" ng-controller="legalController">
    <div id="splash">
    <div id="intro-container">
        <h1>legal</h1>
        <h3>Find legal information and resourcesservices</h3>
    </div>

    <div id="splash-overlay"></div>
</div>
<div id="legal-sections">
    <div id="switcher">
        <ul>
            <li><a id="open-terms-use" ng-click="terms()">Terms of Use</a></li>
<!--            <li><a id="open-security">Security</a></li>-->
            <li><a id="open-cookies" ng-click="cookies()">Cookies Policy</a></li>
            <li><a id="open-private" ng-click="private()">Private Policy</a></li>
        </ul>
    </div>
    <div id="terms-use" ng-show="termsinfo">
        <section>
            <div class="container">
                <div class="Ehl-Page-Header">
                    <h1 class="h2">Terms of use</h1>
                </div></div>

        </section>
    </div>
    <div id="security">
    </div>
    <div id="cookies"  ng-show="cookiesinfo">
        <div>
            <section class="clear container-fluid" id="Cookies-Top">
                <div class="Bg-Mask"></div>
                <div class="container">
                    <h1 class="h2">Cookies</h1>
                </div>

            </section>
        </div>
    </div>
    <div id="private-policy"  ng-show="privacy">
        <div>
            <section>
                <div class="container">
                <div class="Ehl-Page-Header">
                    <h1 class="h2">Privacy</h1>
                </div></div>
            </section>

    </div>
</div>
</div>
  </body>

</html>

Upvotes: 0

VISHAL DAGA
VISHAL DAGA

Reputation: 4289

$scope.terms is not getting executed - 

 $timeout(function () {
        $scope.terms = function () {
            $scope.termsinfo = true;
            $scope.cookiesinfo = false;
            $scope.privacy = false;
        }() //add these braces to execute
        $scope.cookies = function () {
            $scope.termsinfo = false;
            $scope.cookiesinfo = true;
            $scope.privacy = false;
        }() //add these braces to execute
        $scope.private = function () {
            $scope.termsinfo = false;
            $scope.cookiesinfo = false;
            $scope.privacy = true;
        }()
    });

Oops!! yes, I missed to notice, you need to remove - display:none too

Upvotes: 1

Syam Pillai
Syam Pillai

Reputation: 5217

Remove style="display: none;" as angular directive will not overwrite inline-styles.

Upvotes: 1

Oyeme
Oyeme

Reputation: 11225

Just remove style="display: none;" as you're already using ng-show

// Code goes here
var app = angular.module('app',[]);
app.controller('legalController', function ($timeout, $scope) {
    $scope.termsinfo = true;
    $scope.cookiesinfo = false;
    $scope.privacy = false;
    $timeout(function () {
        $scope.terms = function () {
            $scope.termsinfo = true;
            $scope.cookiesinfo = false;
            $scope.privacy = false;
        }
        $scope.cookies = function () {
            $scope.termsinfo = false;
            $scope.cookiesinfo = true;
            $scope.privacy = false;
        }
        $scope.private = function () {
            $scope.termsinfo = false;
            $scope.cookiesinfo = false;
            $scope.privacy = true;
        }
    });
  
});
<!DOCTYPE html>
<html>

  <head>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <link href="style.css" rel="stylesheet" />
    <script src="script.js"></script>
  </head>

  <body ng-app="app" ng-controller="legalController">
    <div id="splash">
    <div id="intro-container">
        <h1>legal</h1>
        <h3>Find legal information and resourcesservices</h3>
    </div>

    <div id="splash-overlay"></div>
</div>
<div id="legal-sections">
    <div id="switcher">
        <ul>
            <li><a id="open-terms-use" ng-click="terms()">Terms of Use</a></li>
<!--            <li><a id="open-security">Security</a></li>-->
            <li><a id="open-cookies" ng-click="cookies()">Cookies Policy</a></li>
            <li><a id="open-private" ng-click="private()">Private Policy</a></li>
        </ul>
    </div>
    <div id="terms-use" ng-show="termsinfo">
        <section>
            <div class="container">
                <div class="Ehl-Page-Header">
                    <h1 class="h2">Terms of use</h1>
                </div></div>

        </section>
    </div>
    <div id="security">
    </div>
    <div id="cookies" ng-show="cookiesinfo">
        <div>
            <section class="clear container-fluid" id="Cookies-Top">
                <div class="Bg-Mask"></div>
                <div class="container">
                    <h1 class="h2">Cookies</h1>
                </div>
  
            </section>
        </div>
    </div>
    <div id="private-policy" ng-show="privacy">
        <div>
            <section>
                <div class="container">
                <div class="Ehl-Page-Header">
                    <h1 class="h2">Privacy</h1>
                </div></div>
            </section>
        
    </div>
</div>
</div>
  </body>

</html>

Upvotes: 3

Related Questions