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

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 调用函数时，来自 chosenTypes 的数据还没有加载，所以被检查的元素没有得到 "active-nametag" class. （然而，当数据加载并检查一个元素时，class 变化得很好）

如何在加载数据后延迟 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:

The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading.

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

Load data from helpers before ng-class renders

angularjs

meteor

ng-class

angular-meteor

checklist-model