使用下拉列表创建表-AngularJS

Question

我想知道从下拉菜单中选择一个项目后是否有可能（以及如何）创建表格。例如，如果我从（环境）下拉菜单中选择ENV1和ENV2，我希望将在侧面创建一个新表并选择值。请参见https://plnkr.co/edit/SnXwQ5Eg0HSKI7G6upM8?p=preview上的示例。

table.html

  <div ng-controller="monitoring" class="md-padding selectdemoOptionGroups" ng-cloak="" ng-app="monitor">

    <div>
      <h1 class="md-title">Monitoring</h1>
      <div layout="row">

        <md-input-container style="margin-right: 10px;">
          <label>Segments</label>
          <md-select ng-model="segment">
            <md-option ng-repeat="segment in segments" value="{{segment}}">{{segment}}</md-option>
          </md-select>
        </md-input-container>

        <md-input-container>
          <label>Environments</label>
          <md-select ng-model="selectedEnvironments" multiple>
            <md-optgroup label="environments">
              <md-option ng-value="environment.name" ng-repeat="environment in environments | filter: {category: 'env' }">{{environment.name}}</md-option>
            </md-optgroup>
          </md-select>
        </md-input-container>

        <md-input-container>
                    <label>Applications</label>
                    <md-select ng-model="selectedApplications" multiple="">
                        <md-optgroup label="application">
                            <md-option ng-value="application.name" ng-repeat="application in applications | filter: {category: 'app' } ">{{application.name}}</md-option>
                        </md-optgroup>
                    </md-select>
                </md-input-container>



        <button ng-click="clear()" style="width: 55px; height: 50px;" id="iconTextButton">Clear</button>
        <button style="width: 55px; height: 50px;" id="iconTextButton">Run</button>
      </div>

      <div class="md-card container-shadow" style="margin:15px">
        <div class="card-header4">
          Monitoring page1 for {{segment}}
        </div>
        <table id="grid422">
          <colgroup>
            <col style="width:830px" />
            <col style="width:130px" />
            <col style="width:130px" />
            <col style="width:130px" />
          </colgroup>
          <thead align="left">
            <tr>
              <th>Application</th>
              <th>Environment</th>
              <th>StatusUP</th>
              <th>StatusDown</th>
            </tr>
          </thead>
          <tbody align="left">
            <tr ng-repeat="todo in todos | filter: filterByGenres | orderBy: 'application' ">
              <td>{{todo.application}}</td>
              <td>{{todo.environment}}</td>
              <td>{{todo.statusUp}}</td>
              <td>{{todo.statusDown}}
                <td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

script.js

(function(angular) {
  angular
    .module('plunker', ['ngMaterial'])
    .controller('monitoring', function($scope, $http) {

      $scope.filterByGenres = function(ele){
        var res = true
        if($scope.selectedEnvironments !== null && $scope.selectedEnvironments.length > 0)
        {
          if($scope.selectedEnvironments.indexOf(ele.environment) == -1)
          {
            res = false;
          }
        }
        if($scope.selectedApplications !== null && $scope.selectedApplications.length > 0)
        {
          if($scope.selectedApplications.indexOf(ele.application) == -1)
          {
            res = false;
          }
        }
        return res;
      }

      $scope.segments = [
        "SegmentA",
        "SegmentB",
        "SegmentC"
      ];
      $scope.selectedSegments = [];
      $scope.printSelectedSegments = function printSelectedSegments() {
        return this.selectedSegments.join('');
      };

      $scope.environments = [{
        category: 'env',
        name: 'ENV1'
      }, {
        category: 'env',
        name: 'ENV2'
      }, {
        category: 'env',
        name: 'ENV3'
      }, {
        category: 'env',
        name: 'ENV4'
      }];
      $scope.selectedEnvironments = [];
      $scope.printSelectedEnvironments = function printSelectedEnvironments() {
        var numberOfEnvironments = this.selectedEnvironments.length;


        if (numberOfEnvironments > 1) {
          var needsOxfordComma = numberOfEnvironments > 2;
          var lastEnvironmentConjunction = (needsOxfordComma ? ',' : '') + ' and ';
          var lastEnvironment = lastEnvironmentConjunction +
            this.selectedEnvironments[this.selectedEnvironments.length - 1];
          return this.selectedEnvironments.slice(0, -1).join(', ') + lastEnvironment;
        }
        return this.selectedEnvironments.join('');
      };

      $scope.applications = [{
        category: 'app',
        name: 'App1'
      }, {
        category: 'app',
        name: 'App2'
      }, {
        category: 'app',
        name: 'App3'
      }, {
        category: 'app',
        name: 'App4'
      }];
      $scope.selectedApplications = [];
      $scope.printSelectedApplications = function printSelectedApplications() {
        var numberOfApplications = this.selectedApplications.length;

        if (numberOfApplications > 1) {
          var needsOxfordComma = numberOfApplications > 2;
          var lastApplicationConjunction = (needsOxfordComma ? ',' : '') + ' and ';
          var lastApplication = lastApplicationConjunction +
            this.selectedApplications[this.selectedApplications.length - 1];
          return this.selectedApplications.slice(0, -1).join(', ') + lastApplication;
        }
        return this.selectedApplications.join('');
      };

      $scope.todos = [{
        "segment": "SegmentA",
        "application": "App1",
        "environment": "ENV1",
        "statusUp": 57,
        "statusDown": "13"
      }, {
        "segment": "SegmentB",
        "application": "App2",
        "environment": "ENV2",
        "statusUp": 12,
        "statusDown": "33"
      }, {
        "segment": "SegmentC",
        "application": "App3",
        "environment": "ENV4",
        "statusUp": 357,
        "statusDown": "133"
      }, {
        "segment": "SegmentA",
        "application": "App1",
        "environment": "ENV1",
        "statusUp": 57,
        "statusDown": "13"
      }, {
        "segment": "SegmentB",
        "application": "App2",
        "environment": "ENV1",
        "statusUp": 12,
        "statusDown": "33"
      }, {
        "segment": "SegmentC",
        "application": "App3",
        "environment": "ENV3",
        "statusUp": 333,
        "statusDown": "213"
      }, {
        "segment": "SegmentB",
        "application": "App1",
        "environment": "ENV4",
        "statusUp": 357,
        "statusDown": "133"
      }, {
        "segment": "SegmentC",
        "application": "App2",
        "environment": "ENV2",
        "statusUp": 57,
        "statusDown": "13"
      }];

    });
})(angular);