CODEWITHSUNDEEP
angularjs
abhishek vashistha
abhishek vashistha

Reputation: 1

when the value of ng-show is true then also element is not visible

I am trying to hide and show tabs using ng-show . I have written the following code

 <li ng-show={{hidetabs}}  > <a data-toggle="tab" id="second_tab" href="#menu1">Customer Contacts</a></li>
            <li ng-show={{hidetabs}}> <a data-toggle="tab" id="third_tab" href="#menu2">CWC User Access</a></li>
      </ul>

and the code for controller is function($scope, ngDialog, $routeParams, $window , $location ) {

                $scope.aircraftlist = [];

                $scope.hidetabs=false;



                $scope.aircraft = {};
                $scope.nextfirsttab = function() {
                    $scope.hidetabs=true;
                    $("#second_tab").click();
                }

The problem is even when i am setting the value of hidetabs to true class is ng-hide . and if in the div put ng-show="hidetabs" it doesnt work at all .

Upvotes: 0

Views: 103

Answers (2)

Roh&#236;t J&#237;ndal
Roh&#236;t J&#237;ndal

Reputation: 27192

Remove {{}} from hidetabs.

use ng-show=hidetabs instead of ng-show={{hidetabs}}.

<ul>
<li ng-show="hidetabs"> 
<a data-toggle="tab" id="second_tab" href="#menu1">Customer Contacts</a></li>
<li ng-show="hidetabs">
<a data-toggle="tab" id="third_tab" href="#menu2">CWC User Access</a>
</li>
</ul>

Plnkr Demo : http://plnkr.co/edit/q4eoglQUcxwNKvbjgQOF?p=preview

Upvotes: 0

Aman Verma
Aman Verma

Reputation: 320

use ng-show variable inside quotation marks, also the interpolation is unnecessary 

 <li ng-show="hidetabs"  > <a data-toggle="tab" id="second_tab" href="#menu1">Customer Contacts</a></li>
        <li ng-show="hidetabs"> <a data-toggle="tab" id="third_tab" href="#menu2">CWC User Access</a></li>
  </ul>

Upvotes: 1

Related Questions