Динамически генерировать HTML, как только данные загрузились

Question

Я хочу динамически генерировать 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 когда оба набора данных возвращаются?

Answer 1

Вам нужно установить 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 2

Просто позвоните, как обычно, и привяжите структуру, в которой вы хотите сохранить данные, до ng-repeat. Как только он будет завершен, назначьте его в свою область действия (вам может потребоваться сделать $apply, если назначение выполняется вне углового контекста).

Для загрузки вы можете установить флаг в true, а затем false, как только все данные загрузятся (пообещайте все или что-то еще). У вас есть значок загрузки, связанный с этим: ng-show.

Answer 3

Имейте в виду, что услуги - это Singletons. Вы можете установить переменную, когда вы создаете экземпляр своей службы. Вы также должны добавить метод 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().

Надеюсь, это поможет. Приветствия.