Question

<div ng-repeat="item in CategorizedItems" 
     ng-if="CategorizedItems.length> 0" 
     class="row customRow itemBorder animated slideInLeft" >
         {{item.name}}
 </div>

我在上面的div中显示了项目列表。

点击按钮，CategorizedItems即会更新。

即

$scope.CategorySelected=function(categoryName){
    $rootScope.CategorizedItems =[];
    $rootScope.CategorizedItems = $rootScope.Items.filter(function(obj){
        if(obj.category.name === categoryName)
            return obj
    });

}

此方法被调用。现在，当我从一个班级转到另一个班级时，新项目会优雅地显示，但之前类别的项目会在新项目列表下显示几秒钟。

Answer 1

这是Angular中的常见问题。

大多数人这样做......

<div ng-if="false">
    don't display me
</div>

然后在HTML结尾...

<script src=".....angular.min.js">

并期望DIV不会出现。当然它最初会出现在这种情况下，因为它不知道什么是ng-if意味着加载了UNTIL角度。将您的角度脚本包含在页面顶部。

您可能还希望考虑使用ngCloak指令或CSS类，这是解决此问题的文档化方法（假设脚本标记位于页面顶部）。

如果我遇到这个问题，那么我可能会在我的控制器中使用$ scope.readyToRender布尔变量来控制何时显示元素。例如在控制器代码结束时，我将其设置为true并将代码包装在ng-if ='readyToRender'中

在视图完全更新角度之前出现ng-repeat项目

1 个答案: