數據加載後動態生成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

回答

相關問題