Question

我目前有一个两页应用程序，该应用程序允许用户输入数据并单击提交，然后打开下一页，并将查询结果显示在网格中。像下面一样

home.html

when(cpMock.requestInstance()).thenAnswer(new Answer<Instance>() {
  @Override public Instance answer(InvocationOnMock invocation) {
    return new Instance(size));
  }
}

result.html

  <form name="homeForm">
<div class="form-group col-md-6 md-padding">
    <div>
        <label style="font-size: medium">From Date</label>
        <p class="input-group">
            <input type="text" class="form-control"
                   id="fromDate"
                   name="fromDate"
                   uib-datepicker-popup="{{format}}"
                   ng-model="request.fromDate"
                   is-open="popup1.opened"
                   datepicker-options="dateOptions"
                   ng-required="true"
                   close-text="Close"
                   alt-input-formats="altInputFormats"
                   required />
            <span class="input-group-btn">
                <button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
            </span>
        </p>
        <div style="color:maroon" ng-messages="homeForm.fromDate.$error"
             ng-if="homeForm.fromDate.$touched">
            <div ng-message="required">This field is required</div>
        </div>
    </div>


    <div>
        <label style="font-size: medium">To Date</label>
        <p class="input-group">
            <input type="text" class="form-control"
                   id="toDate"
                   name="toDate"
                   uib-datepicker-popup="{{format}}"
                   ng-model="request.toDate"
                   is-open="popup2.opened"
                   datepicker-options="dateOptions"
                   ng-required="true"
                   close-text="Close"
                   alt-input-formats="altInputFormats"
                   required />
            <span class="input-group-btn">
                <button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button>
            </span>
        </p>
        <div style="color:maroon" ng-messages="homeForm.toDate.$error"
             ng-if="homeForm.toDate.$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-danger' ng-click="clearRequest(homeForm)">Clear</button>
            <!--ng-disabled="!homeForm.$valid" -->
            &nbsp;&nbsp;
            <button type="button" class="btn btn-success" href="Views/Angular/results.html" ng-click="createRequest(homeForm)">Submit</button>
        </div>
    </div>
</div>
</form>

现在，我试图将所有查询和查询结果放到一个页面中。就像左侧的所有输入/按钮和右侧的网格一样。

将代码添加到Plunker here

我是否需要再添加一个同时包含这两个html的html页面，我应该在app.js中调用它？我对AngularJS还是陌生的，我不确定该怎么做

Answer 1

是的，您应该创建一个视图组件，其中将包括您的两个组件，它们将成为新添加的视图的子组件。

查看this教程以学习该概念。

Answer 2

您可以使用异步XHTML和JavaScript（AJAX）将所有内容都放在一个页面上，而无需加载另一个页面，除非您有要求在单独的页面上显示结果，否则我将这样做。

考虑到您有type=button作为提交按钮，它似乎是AJAX的原意，因为这将防止单击提交按钮时重新加载页面。

基本上，在createRequest()函数中，将查询参数（似乎包含在homeForm参数中）发送到查询服务。收到响应后，用您要在表中显示的值更新gridOptions.data。剩下的事情由Angular负责。

在同一页面上显示查询和结果

2 个答案: