Question

我是AngularJS的新手并尝试创建一个通过调用API加载数据的应用程序。这就像我正在获取类型A（资源组）的框列表，然后每个类型A的框都有多个类型为B（虚拟机）的框。所以我已经能够获取所有类型的A框，并且通过使用类型A框的每个值，我已经能够获取所有类型B框（VM）。但是现在我该如何将VM放在相应资源组的面板主体中。

(function() {
  var app = angular.module('AzureManager', []);
  app.controller('resourceGroupsController', function($scope, $http) {

    $scope.getRGList = function() {
      $http.get('/resource-group/all').then(function(response) {
        $scope.resourceGroups = response.data.value;
      });
    };

    $scope.getRGList();

  });
})();

<!DOCTYPE HTML>
<HTML ng-app="AzureManager">

<head>
  <title>Azure Manager</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.1/angular.min.js"></script>
  <script src="public/app.js"></script>
</head>

<body>
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#topNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Azure Manager</a>
      </div>
      <div class="collapse navbar-collapse" id="topNavbar">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#"><span class="glyphicon glyphicon-user"></span> Anant</a>
          </li>
          <li><a href="#"><span class="glyphicon glyphicon-log-out"></span> Logout</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <section class="container-fluid" ng-controller="resourceGroupsController">
    <div class="panel panel-default" ng-repeat="RG in resourceGroups" id="{{RG.name}}-resources-container">
      <div class="panel-heading">
        <div class="panel-title">{{RG.name}}</div>
      </div>
      <div class="panel-body"></div>
    </div>
  </section>

</body>

</HTML>

Answer 1

通过链接对资源组和虚拟机的调用来调用vms/all端点，并在两个promise都返回后将虚拟机链接到其资源组。

或者为每个资源组调用端点：

$scope.getRGList = function() {
  $http.get('/resource-group/all').then(function(response) {
    $scope.resourceGroups = response.data.value;

    $scope.resourceGroups.forEach(function (rg) {
        $http.get('/virtual-machine/'+rg.id).then(function(response) {
            rg.vms = response;
        }
    }
  });
};



  <section class="container-fluid" ng-controller="resourceGroupsController">
    <div class="panel panel-default" ng-repeat="RG in resourceGroups track by RG.id" id="{{RG.name}}-resources-container">
      <div class="panel-heading">
        <div class="panel-title">{{RG.name}}</div>
      </div>
      <div class="panel-body">
        <div class="vm" ng-repeat="vm in RG.vms track by $index">
            {{vm.name}}
        </div>
      </div>
    </div>
  </section>

使用AngularJS中第一个API的响应调用多个REST API

1 个答案: