Question

我有一个两页的应用程序，该应用程序在一页上获取用户输入的查询内容，并在另一页上的网格中显示结果。我正在尝试将此应用程序合并到一个页面中，用户在页面顶部输入，并导致页面底部网格。我对Angular / Javascript非常陌生。我可以在ng-click事件上的按钮上调用下一页，但是不确定如何在同一页面上显示。下面是两页应用程序的代码

home.html

<div>
  <form name="homeForm">
    <div class="form-group col-md-6 md-padding">
      <div>
        <label style="font-size: medium">Laboratory Name</label>
        <select name="labName" class="form-control" ng-model="request.labName" required>
          <option ng-repeat="lab in labList" value="{{lab.id}}">{{lab.value}}</option>
        </select>
        <div style="color:maroon" ng-messages="homeForm.labName.$error" ng-if="homeForm.labName.$touched">
          <div ng-message="required">This field is required</div>
        </div>
      </div>

      <div class="md-padding col-md-6">
        <div class="row form-group">
          <button type="button" class="btn btn-success" href="Views/Angular/results.html" ng-disabled="!homeForm.$valid" ng-click="createRequest(homeForm)">Submit</button>
        </div>
      </div>
    </div>
  </form>
</div>

result.html

<div>
  <h4 class="text-primary">Search Results</h4>
  <div layout="row" layout-sm="column" layout-align="space-around">
    <md-progress-circular md-mode="indeterminate" ng-show="isLoading" md-diameter="150"></md-progress-circular>
  </div>
  <div id="gridStyle" ng-if="gridOptions.data" ui-grid="gridOptions" class="myGrid" ui-grid-resize-columns ui-grid-pagination ui-grid-selection ui-grid-auto-resize ui-grid-cellNav ui-grid-exporter>
  </div>
</div>

控制器看起来像下面的

homeController.js

(function() {
  angular.module("app").controller("homeController", homeController);

  function homeController($scope, $rootScope, $location, $window) {
    .........
    $scope.createRequest = function(form) {
      $rootScope.labName = $scope.request.labName;
      $location.path('/results');
    };
  };
})();

resultController.js

(function() {
  angular.module("app").controller("resultsController", resultsController);

  function resultsController($scope, $http, $rootScope,
    uiGridConstants) {

    ....

    $scope.gridOptions.columnDefs = [{
      name: 'RequestID',
      displayName: "Request ID",
      enableColumnResizing: true,
      width: 100
    }];
    var myQuery = "SELECT submitter from request where lab = '" + rootScope.labName + "'";
    var params = {
      query: myQuery
    };

    $http.get('/api/AtRequest', {
        params: params
      })
      .then(
        function(response) {
          $scope.gridOptions.data = response.data;
          $scope.isLoading = false;
        },
        function(response) {
          console.log("Something went wrong");
        }
      );
  };
})();

Answer 1

您有一些合并方法。其中之一是在home.html文件中使用ng-include标记，这会将网格添加到home.html文件中（为result.html文件考虑正确的路径，并且在result.html中不要使用ng-controller）< / p>

<div ng-include="'result.html'"></div>

从按钮中删除href并进行ng单击以填充网格数据

然后合并控制器（将resultController的内容添加到homeController）。

如果要彼此分离控制器文件，则可以创建一个获取数据并在homeController中调用它的服务。

Answer 2

类似这样的事情，但是请注意，该文件中应该只有一个ng-controller，在此示例中，它是homeController。如果您遇到404错误，则可能是由于result.html.path的路径所致，请检查它是否位于您将其分配给ng-include的正确路径中。

<div ng-controller=homeController>
<form name="homeForm">
<div class="form-group col-md-6 md-padding">
  <div>
    <label style="font-size: medium">Laboratory Name</label>
    <select name="labName" class="form-control" ng-model="request.labName" required>
      <option ng-repeat="lab in labList" value="{{lab.id}}">{{lab.value}}</option>
    </select>
    <div style="color:maroon" ng-messages="homeForm.labName.$error" ng-if="homeForm.labName.$touched">
      <div ng-message="required">This field is required</div>
    </div>
  </div>

  <div class="md-padding col-md-6">
    <div class="row form-group">
      <button type="button" class="btn btn-success" href="Views/Angular/results.html" 
   ng-disabled="!homeForm.$valid" ng-click="createRequest(homeForm)">Submit</button>
    </div>
  </div>
  </div>
  <div ng-include="'result.html'"></div>
 </form>
</div>

AngularJS将两页应用程序合并到一页中

2 个答案: