javascripthtmlangularjsng-show

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.


Solution

  • 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.