时间戳

首页 > 解决方案 > AngularJS将两页应用程序合并到一页中

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

问题描述

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

主页.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>

结果.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');
    };
  };
})();

结果控制器.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");
        }
      );
  };
})();

标签： javascripthtmlangularjs

解决方案

类似这样的东西，但请注意，您应该在此文件中只有一个 ng-controller，在此示例中它是 homeController。如果您有 404 错误，可能是因为 result.html 的路径。检查它是否在您将其分配给 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>

推荐阅读