Angularjs and bootstrap pagination not hiding divs correctly

Question

I am using Angularjs and pagination to show multiple divs. I am then hiding the divs based on some criteria. See code exract below

                <div class="DataItem" dir-paginate="x in parametersToDisplay | orderBy:'Name' | filter:textFilter | itemsPerPage: pageSize" current-page="currentPage" ng-hide="x.DetailLevel > detailLevel">                  
                    <label id="lblParameterName{{x.ConfigId}}" class="DataItemLabel">{{x.Name}}</label>
                    <label id="lblDescription{{x.ConfigId}}" class="DataItemLabel">{{x.Description}}</label>
                    <label id="lblUnits{{x.ConfigId}}" class="DataItemUnits">{{x.Units}}</label>
                    <input id="txtParameterValue{{x.ConfigId}}" class="DataItemValue" type="text" ng-blur="CheckCongigValue($event, x)" value="{{x.Value}}" />
                </div>
            </div>

The problem is that the divs that should be hidden are not visible but they still take the space. If I remove the pagination and just use a div with a ng-repeat it works fine and the hidden divs totally disappear.

I read that the bootstrap css for hidden uses display:hidden and overwrites the angularjs css which uses display:none. I also believe this can be overridden to correct the problem, but I have tried several things and can't seem to work it out.

Could someone give me a simple example showing how to do this.

Thank you in advance!

score 1 · Answer 1 · edited May 23 '17 at 10:26

1

you have to use ng-if instead of ng-show/hide.

The ngIf directive removes or recreates a portion of the DOM tree based on an expression. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.

Good explaination here

edited May 23 '17 at 10:26

Community

1
1

answered Jul 07 '15 at 15:18

ThomasP1988

4,597
3
30
36

Thanks for your response, but if I replace ng-show with ng-if nothing gets shown. If I replace the criteria with true or false then it works. My criteria works with the ng-show. – ee0jmt Jul 07 '15 at 15:42
1

you have to adapt you criteria, ng-if is positive, ng-hide is negative. So try ng-if="x.DetailLevel <= detailLevel" – ThomasP1988 Jul 07 '15 at 15:45
I managed to sort out my criteria, but now ng-if does the same as ng-show and leaves the blanks where the hidden divs are. I am pretty sure I need to override the bootstrap css as it defines the hide differently, but not sure how to do this? – ee0jmt Jul 08 '15 at 09:51
Also If I remove the pagination directives and just use a ng-repeat and ng-show it works fine. – ee0jmt Jul 08 '15 at 09:57

score 0 · Answer 2 · answered Jul 08 '15 at 10:42

0

In the end I manaed to fix it by producing a new array witht the filtered parameters that I wanted to display and then applied this to the pagination.

Its not the best solution but it works.

answered Jul 08 '15 at 10:42

ee0jmt

335
1
11

Angularjs and bootstrap pagination not hiding divs correctly

2 Answers2