Question

我正在使用Meteor和AngularJs开展项目。

我使用帮助器检索一些数据，然后使用ng-repeat来显示它们。

我使用清单模型（http://vitalets.github.io/checklist-model/）来获取复选框选项列表。

<li ng-repeat="t in types">
  <div ng-class="nametagClass(t)">{{t.name}}</div>
  <input type="checkbox" data-checklist-value="t" 
         data-checklist-model="chosenTypes" class="sub-checkbox" />
</li>

这是ng-class函数：

$scope.nametagClass=function(type){
            if($scope.chosenTypes.indexOf(type)>-1){
                return "nametag active-nametag";
            }

            return "nametag";
        }

问题是，当ng-class调用该函数时，来自selectedTypes的数据尚未加载，因此被检查的元素不会获得＆＃34; active-nametag＆＃34;类。（但是，当数据加载并检查元素时，类更改就好了）

如何在加载数据后延迟ng-class函数调用？

Answer 1

只需在外部元素中添加ng-if，就像这样

<li ng-if="types" ng-repeat="t in types">
  <div ng-class="nametagClass(t)">{{t.name}}</div>
  <input type="checkbox" data-checklist-value="t" data-checklist-model="chosenTypes" class="sub-checkbox" />
</li>

Answer 2

ngIf将是一种选择。我认为你也可以使用ngCloak：

ngCloak指令用于阻止Angular html模板来自浏览器的原始（未编译）短暂显示在您的应用程序加载时形成。

在ng-class渲染之前从助手加载数据

2 个答案: