数据加载后动态生成HTML

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

我已经在过去使用过ng-repeat在我的控制器中使用JS集合来生成结果，即集合中的每个项目都会输出这个HTML块，这实际上是我在这里要做的，尽管有两个嵌套的ng重复序列。例如

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

我的问题是，虽然我有异步调用开了一个REST API来获取这个数据，并返回所以当它进入的承诺块来处理结果。

如

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加载数据，具有用户界面显示“加载”光标，而它加载，然后呈现在动态HTML两组数据都回来了？

来源

2016-06-07 NZJames

您需要设置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。

来源

2016-06-07 13:56:59

只需按照通常的方式进行其他调用，并将要存储数据的结构绑定到ng-repeat。完成后，将其分配给示波器（如果分配发生在角度范围之外，则可能需要执行$apply）。

对于加载，您可以设置一个标志为true，然后在所有数据加载完成后设置为false（在承诺所有或其他方面）。使用ng-show将您的加载图标绑定到此。

来源

2016-06-07 13:57:50 aw04

请记住，服务是单身人士。您可以在实例化服务时设置变量。你还应该添加一个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（）方法。

希望这会有所帮助。干杯。

来源

2016-06-07 14:15:14 emcee22

数据加载后动态生成HTML

回答

相关问题