CODEWITHSUNDEEP
angularjs
Dipali
Dipali

Reputation: 65

ng-show and ng-hide not working

I am new to Angularjs. Following is the scenario I am trying to achieve:

Scenario: I need to hide the search bar and the table when am in my "card.html" page which is called by using the function redirectsearchcardURL. Later when I click on 'Home', again the search and table should be shown.

I am using ng-hide to hide the search bar and table but again when i click on home, the search and table is not visible to me.

Below is my code. home.html file. 

            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-home"></span></a></li>

                </ul>
            </div>
        </div>
    </nav>

<center class="main">

    <div class="container" ng-controller="card-set-controller" ng-init="getAllSets()">
        <form ng-hide ="hideVar" action="#" method="get" style="margin-top:75px; margin-bottom:75px">
            <div class="col-md-6 input-group has-feedback">
                <input class="form-control" id="system-search" placeholder="Search Flashcard Sets">
                <i class="glyphicon glyphicon-search form-control-feedback"></i>
            </div>
        </form>

        <table ng-hide ="hideVar" class="table table-hover table-responsive table-list-search">

            <tbody>

            <tr class="active" ng-repeat="set in sets">
                <td><a href="" ng-click="redirectSearchCardUrl(set.setIdNum, set.Name)">{{set.Name}}</a></td>
            </tr>
            </tbody>
        </table>
    </div>
    </center>

My controller code where I am setting my "hideVar" is:

$scope.redirectSearchCardUrl = function(setIdNum, name) {
        var url = "/card/"+setIdNum+ "/"+name;
        $scope.hideVar = true;
        $location.path(url);    
    }

Upvotes: 0

Views: 329

Answers (1)

nikk wong
nikk wong

Reputation: 8670

Are you ever setting hideVar back to false? You could do

<li class="active"><a href="#" ng-click="hideVar = false">Home</a></li>

Upvotes: 2

Related Questions