Question

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

我过去曾使用ng-repeat在我的控制器中使用JS集合来生成结果，即对于集合中的每个项目，输出这个HTML块，这实际上是我想要在这里做的，尽管有两个嵌套的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块来处理结果。

例如

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

如何让控制器在后台加载REST API中的数据，让UI在加载时显示“加载”光标，然后在两组数据都返回时呈现动态HTML？

Answer 1

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

对于加载，您可以将一个标志设置为true，然后将所有数据加载后设置为false（在promise all或其他任何数据上）。使用ng-show将加载图标绑定到此处。

Answer 2

您需要设置ng-show：

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

和你的js - return a promise。

Answer 3

请记住，服务是单身人士。您可以在实例化服务时设置变量。你还应该添加一个setter和getter方法，这样你就不会一遍又一遍地做同样的调用。

在控制器中注入服务，并通过调用get方法设置您想要的内容。

这样的事情：

angular.module('someModule').service('catService', ($http) => {

        // add categories here
        let categories  = null;

        let returnObj = {
            init: () => {
                returnObj.returnCategories();
            },
            returnCategories: () => {
                let promise = $http.get('/app/categories').then(function (response) {
                    if( response.data ) returnObj.setCategories(response.data);
                    return response.data;
                });
                // Return the promise to the controller
                return promise;
            },
            setCategories: ( data ) =>{
                categories = data;
            },
            getCategories: () => {
                return categories;
            }
        };

        return returnObj;

    });

然后你必须将它注入控制器：

angular.module('someModule')
.controller('yourController', ['$scope', 'catService', ($scope, catService) => {

    // set the libraries property
    $scope.cat = {};
    catService.returnCategories().then( () => {
        $scope.cat= catService.getCategories();
    });

}]);

你也可以在其他地方实例化它，然后在你的控制器中你只能调用getCategories（）方法。

希望这会有所帮助。欢呼声。

加载数据后动态生成HTML

3 个答案: