Question

我阅读了有关此主题的几个答案，但它们似乎不适用于我的问题。我的问题很复杂。我有一个使用ReportViewer.ASPX的表单。表单定义如下：

<form name="form" novalidate role="form"
          sm-dirty-check
          id="reportViewer"
          method="post"
          action="~/Infrastructure/ReportViewer/reportViewer.aspx"
          target="viewerIFrame"          
          ng-show="crud.showForm" class="ng-cloak">

       @* Form inputs *@
        <input type="hidden" name="labelType" value="Rental" />
        <input type="hidden" name="labelLayoutId" value="{{ crud.model.lbLayoutId }}" />
        <input type="hidden" name="itemsToPrint" value="{{ crud.jsItemsToPrint }}" />

实际的表单是在标签中使用ng-form定义的（我只共享了与我的问题相关的Edit表单的顶部）。

我在表单底部也有这些按钮：

    <button type="submit"
            ng-if="crud.model.lbLayoutId!==0"
            name="generateLabelButton"
            id="generateLabelButton"
            class="btn btn-primary pull-left"
            ng-click="crud.generateLabel()"
            ng-disabled="crud.isSaveButtonDisabled">
        @Labels.generateLabel
    </button>
    <div class="pull-left generateLabelButton">
        <data-desc:type ng-if="crud.model.lbLayoutId===0"
                        value="@Labels.generateLabel"
                        keep-pristine="true"
                        on-after-selection="crud.layoutSelected(selectedValue)"
                        title="{{ '@string.Format(Labels.selectX, Labels.labelLayout)'}}"
                        param="layouts"
                        message="@string.Format(Labels.selectX, Labels.labelLayout)"
                        selected="crud.model.lbLayoutId"
                        descrip-value="descrip"
                        id="layoutPickerButton"
                        name="layoutPickerButton"
                        button-type="button"
                        type="7"
                        filter-by="Label"
                        description="crud.model.lbLayout">
        </data-desc:type>
    </div>

因此，如果我定义了lblLayoutId，则有我的常规提交按钮，然后按下它并提交表单，一切就很好了。

如果我没有定义lblLayoutId（它为0），则需要使用一个带有按钮模板的指令，当我按下按钮时，它会打开一个模式窗体来选择布局，等等。

所以，我的问题是选择布局后，我需要提交表单以使标签可以显示。

我试图使该指令的类型为Submit（按钮类型的属性），但这不起作用。

我还在选择值时由按钮执行的方法中尝试了以下代码：

rentalEquipmentsCrudController.prototype.layoutSelected = function (selectedValue) {
    this.model.lbLayoutId = selectedValue;
    $("#generateLabelButton").click();        
}
rentalEquipmentsCrudController.prototype.generateLabel = function () {
    if (this.model.lbLayoutId === 0) return;
    this.jsItemsToPrint = "";
    this.itemsToPrint = this.getItemsToPrint();

    this.jsItemsToPrint = JSON.stringify(this.itemsToPrint);


    angular.element($("#viewerIFrame").contents()
      .find("#reportViewer_ReportViewer")).empty();
    let actionPath = angular.element($("#reportViewer")).attr("action");
    if (actionPath.slice(-3) !== "pdf") actionPath += "/Labels.pdf";

    angular.element($("#reportViewer")).attr("action", actionPath);
    this.showViewer = true;

};

layoutSelected方法是从我的指令执行的，而下一个代码是由我的常规按钮执行的。

所以，我不知道如何使它工作。

Answer 1

表单在客户端AngularJS应用程序中的作用不同于传统的往返应用程序，浏览器最好不要将表单提交转换为整个页面重载。而是发布JSON数据并接收JSON数据响应。转到服务器获取数据，而不是html / js / css等。

阅读AngularJS <form> Directive API Reference - Submitting a form and preventing the default action。

Answer 2

您不想将ng-click与按钮type="submit"组合在一起，这仍将导致表单（以非编程方式）提交。而是使用type="button"。或者，您可以保留type="submit"，但将ng-submit="crud.generateLabel()"添加到表单元素

<form>
  ...
  <button type="button" ng-click="crud.generateLabel()">...</button>
</form>

或者：

<form ng-submit="crud.generateLabel()">
  ...
  <button type="submit">...</button>
</form>

AngularJs-以编程方式提交表单

2 个答案: