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