javascript - 数据加载后动态生成 HTML

Question

我想根据数据驱动值在我的网页上动态生成 HTML 数据。即我想加载一个环境列表、一个模型列表，然后对于每个模型/环境组合，基于此输出一行 HTML。

我过去曾使用 ng-repeat 在我的 Controller 中使用 JS 集合来生成结果，即对于集合中的每个项目，输出此 HTML block ，这实际上是我想要在这里做的事情，尽管有两个嵌套的 ng-repeats。例如

<tr ng-repeat="model in models">
    <td>
       <div ng-repeat="env in environments">
         {{model.name}} {{env.name}}
       </div>
    </td>
</tr>

但我的问题是，我必须异步调用 REST api 才能获取此数据，因此当返回时，它会进入 Promise block 来处理结果。

例如

appService.init = function() 
{
    ComputeModelService.getModels()
                .then(function (response, status, headers, config) {
          $scope.models = response.data;
    }

    ComputeModelService.getEnvironments()
                .then(function (response, status, headers, config) {
          $scope.environments = response.data;
    }
}

init()

如何让 Controller 在后台从 REST API 加载数据，让 UI 在加载时显示“正在加载”光标，然后在两组数据返回时呈现动态 HTML？

Answer 1

只需像平常一样进行其余调用，并将要存储数据的结构绑定(bind)到 ng-repeat 即可。完成后，将其分配给您的范围(如果分配发生在 Angular 上下文之外，您可能需要执行 $apply)。

对于加载，您可以将一个标志设置为 true，然后在所有数据加载后将其设置为 false( promise 全部或其他)。使用 ng-show 将您的加载图标绑定(bind)到此。