Question

我正在使用Angularjs和分页来显示多个div。然后我根据一些标准隐藏div。请参阅下面的代码摘录

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

问题是应该隐藏的div是不可见的，但它们仍占用空间。如果我删除分页并只使用带有ng-repeat的div它可以正常工作并且隐藏的div完全消失。

我读到隐藏用途的bootstrap css显示：隐藏并覆盖使用display：none的angularjs css。我也相信这可以被覆盖以纠正问题，但我已经尝试了几件事情，似乎无法解决问题。

有人可以给我一个简单的例子来说明如何做到这一点。

提前谢谢！

Answer 1

你必须使用ng-if而不是ng-show / hide。

ngIf指令根据表达式删除或重新创建DOM树的一部分。如果分配给ngIf的表达式求值为false值，则从DOM中删除该元素，否则将元素的克隆重新插入DOM中。

Good explaination here

Answer 2

最后，我通过生成一个包含我想要显示的过滤参数的新数组来管理它，然后将其应用于分页。

它不是最好的解决方案，但它有效。

Angularjs和bootstrap分页没有正确隐藏div

2 个答案: