CODEWITHSUNDEEP
javascripthtmlangularjsng-show
Andrew
Andrew

Reputation: 378

ng-show set as false doesn't hide element at page load

I have this piece of code, using Angular 1.3 and I want the div with the ng-show directive to NOT show when I load the page in the first place:

       <div class="stuff">
            <uib-accordion close-others="false">
                <div ng-show="element.visible" ng-repeat="element in elements" ng-if="element.active" uib-accordion-group ng-class="element.open? 'colorBackgroundBlue':'black'" class="panel-default yellow" is-open="element.open">
                    <uib-accordion-heading>
                        {{element.title}} ({{element.number}}) 
                    </uib-accordion-heading>
                    <div class="scrollable-accordion" ng-if="element.numberOfElements!=0">
                    </div>
                </div>
            </uib-accordion>                
        </div>

the element.visible boolean is set as false in the controller:

$scope.elements = [{
            status: 0,       
            title: blabla,
            number: 0,
            open: false,
            active: false,         
            visible: false
        }, {
            status: 1,     
            title: blob,        
            number: 0,
            open: false,
            active: false,         
            visible: false
        }]

For some reason it appears that the ng-show is correctly set to false but the element shows up anyway. If I bind a button to the visible boolean though and change it while I am in the browser, the element appears and disappears correctly.

Upvotes: 0

Views: 5867

Answers (5)

Tajkumar
Tajkumar

Reputation: 441

Add class="ng-hide" along with the ng-cloak. <span class="bag-badge bag-melon ng-hide" ng-show="itemsincart>0" ng-cloak>{{itemsincart}}</span>

It worked for me and it avoided the flickering of the elements while the page load.

Upvotes: 0

Andrew
Andrew

Reputation: 378

For anyone who stumbles on the same problem using uib-accordions in angular.

Turns out ng-show doesn't work properly if initially set as false and used inside the uib-accordion tag. What I did to solve the problem was to wrap the accordion in a div and use ng-show on THAT div instead. Like this: 

         <div class="stuff">
            <div ng-show="element.visible" ng-repeat="element in elements" >
            <uib-accordion close-others="false">
                <div ng-if="element.active" uib-accordion-group ng-class="element.open? 'colorBackgroundBlue':'black'" class="panel-default yellow" is-open="element.open">
                    <uib-accordion-heading>
                        {{element.title}} ({{element.number}}) 
                    </uib-accordion-heading>
                    <div class="scrollable-accordion" ng-if="element.numberOfElements!=0">
                    </div>
                </div>
            </uib-accordion>
            </div>
        </div>

Beware: the problem only occurred at page load and only with ng-show and ng-hide, while ng-if seems to work perfectly fine inside the <uib-accordion>. Thanks to everyone who tried to help anyways.

Upvotes: 1

Naghaveer R
Naghaveer R

Reputation: 2944

You are using both ng-if and ng-show. Try to remove anyone of this. Both meant for the same purpose.

And also use ng-cloak which prevent the AngularJS html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading.

var app = angular.module("app", []);
app.controller("ctrl", function($scope) {
  $scope.elements = [{
    status: 0,
    title: 'blabla',
    number: 0,
    open: false,
    active: false,
    visible: false
  }, {
    status: 1,
    title: 'blob',
    number: 0,
    open: false,
    active: false,
    visible: false
  }];
  
  $scope.ShowHide = function(){
    angular.forEach($scope.elements, function(element){
      element.visible=!element.visible;
      element.active=!element.active;
      alert(element.visible);
    });
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <div class="stuff">
    <uib-accordion close-others="false">
      <div ng-cloak ng-show="element.visible" ng-repeat="element in elements" ng-if="element.active" uib-accordion-group ng-class="element.open? 'colorBackgroundBlue':'black'" class="panel-default yellow" is-open="element.open">
        <uib-accordion-heading>
          {{element.title}} ({{element.number}})
        </uib-accordion-heading>
        <div class="scrollable-accordion" ng-if="element.numberOfElements!=0">
        </div>
      </div>
    </uib-accordion>
    <button ng-click="ShowHide()">Make visible</button>
  </div>
</div>

Upvotes: 2

Mazz
Mazz

Reputation: 1879

Try to use ng-cloak

The ngCloak directive is used to prevent the AngularJS html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading.

<div id="template1" ng-cloak>{{ 'hello' }}</div>

Upvotes: 1

Bartek Fryzowicz
Bartek Fryzowicz

Reputation: 6674

Element is visible on page load because scope is not linked to directive yet. ng-cloak can solve your problem

Upvotes: 1

Related Questions