以角度获取表单提交按钮值属性值

Question

我基本上想要像this example at W3Schools这样的功能

<form action="demo_form.asp" method="get">
Choose your favorite subject:
<button name="subject" type="submit" value="fav_HTML">HTML</button>
<button name="subject" type="submit" value="fav_CSS">CSS</button>
</form>

除了在 Angular 中，如果用户单击任一按钮，我可以在我的控制器中查看他是否单击了 HTML 或 CSS 按钮。

到目前为止我尝试过的是这个（查看我的版本，看看用户是否点击了agree 或decline）

<form name="agrCtrl.agreement" ng-submit="agrCtrl.submit()">
    <button class="form-control btn btn-primary" type="submit" value="agree">
        Agree
    </button>
    <button class="form-control btn btn-primary" type="submit" value="decline">
        Decline
    </button>
</form>

和控制器

'use strict';

angular.module('app')
.controller('AgreementController', AgreementController);

function AgreementController() {
  var agrCtrl = this;

  agrCtrl.submit = submit;

  //////////

  function submit() {
    console.log(agrCtrl.agreement);
  }
}

但是，当我记录 agrCtrl.agreement 时，我找不到任何指向 value 属性的 agree 或 decline 值的内容。

我也试过把它改成ng-value 对这个测试没有影响。

我也知道我可以跳过表单，只在任一按钮上使用ng-click，我想我会这样做，但我仍然认为这提出了一个有趣的问题，因为根据 W3Schools 示例，这看起来是可能的。

Answer 1

当您提交表单时，您用来执行此操作的提交按钮是成功的，并且它的名称=值对将在 HTTP 请求中与其余的表单数据一起提交（这就是您链接到的示例的方式工作）。

当您第一次提交客户端事件时，没有关于哪个提交按钮用于触发事件的信息可用。

所以你必须这样做：

我也知道我可以跳过表单，直接使用 ng-click 按钮

为了解决类似的问题（在我有 jQuery 但没有 Angular 的环境中，虽然原理是一样的）我这样做了：

    // Add hidden inputs when a button is clicked so that we can maintain the name/value despite GA tracking interference
    $f.on("click", "button, [type=submit]", function(event) {
        // Get the existing tracker
        var $tracker = $f.find("input[type=hidden].selectedsubmitbutton");
        if (!$tracker.length) {
            // Create a new tracker if we can't find one
            $tracker = $("<input />")
                        .attr("type", "hidden")
                        .addClass("selectedsubmitbutton")
                        .appendTo($f);
        }
        // Update the tracker with the data from the submit button that was just clicked
        $tracker
            .attr('name', this.name)
            .val(this.value);
    });

...由于隐藏输入总是成功并出现在表单中，因此它们可供服务器和任何可以访问表单对象的 JS 使用。