Question

听起来很简单，一个众所周知的问题，对吧？我也这么认为。我如何在angularJS中执行此操作。

CSHTML

@using (Html.BeginForm("Order", "Shop", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
 <div class="container" ng-app="order" ng-controller="orderController">
      <button type="submit" ng-disabled="orderButtonClicked" ng-click="orderClicked()" class="btn btn-primary btn-block tf-btn btn-lg">Place Order</button>
</div>
}

AngularJS

angular.module("order", [])
.controller("orderController", ['$scope', '$http','$filter', function ($scope, $http, $filter) {

    $scope.orderButtonClicked = false;

    $scope.orderClicked = function () {
    $scope.orderButtonClicked = true;

    }    
}]);

正如许多其他人报道的那样，在禁用或删除按钮时表单未提交。 this答案也是如此，他声称这是有效的，但对我来说是不行的。

您可以假设角度设置正确，禁用该按钮可以正常工作。

Answer 1

在任何情况下都禁用提交按钮我从来没有太多运气 - 即使它没有阻止表单提交，服务器也会感到困惑，因为它需要来自的名称/值组合提交按钮。

相反，我通常隐藏提交按钮，并用适当的东西替换它：

    <button type="submit" ng-show="!orderButtonClicked" ng-click="orderClicked()" class="btn btn-primary btn-block tf-btn btn-lg">Place Order</button>
    <button ng-show="orderButtonClicked" disabled class="btn btn-primary btn-block tf-btn btn-lg">Place Order</button>

请注意，即使在这种情况下，用户也可以通过点击输入文本框来重新提交。

Answer 2

如果您不禁用或删除按钮，表单是否会提交？ angular documentation表示，＆＃34;因此，Angular会阻止默认操作（表单提交到服务器），除非<form>元素指定了action属性。＆＃34 ;
因此，根据您要完成的操作，您必须在.orderClicked方法中添加javascript以进行ajax调用，例如，或者您尝试完成的任何操作。

Answer 3

尝试这种方式：

<div ng-app="myApp" ng-controller="myCtrl">
    <form>
        <input type="submit" ng-disabled="orderButtonClicked" ng-click="orderClicked()">
    </form>
</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
    $scope.orderButtonClicked = false;

    $scope.orderClicked = function () {
        $scope.orderButtonClicked = true;
    }
});
</script>

Answer 4

我会在那里设置一个断点，看看当orderClicked（）被触发时orderButtonClicked是否设置为true。只是另一个想法，我有这个问题的经验之前，我有一个ng-if在html控制器范围内的某个地方。这是因为角度似乎在ng-if dom中创建了一个新的范围。避免这种情况的最好方法是使用controllerAs，然后使用controllerName.propertyName访问scope属性。

表单提交后禁用按钮

4 个答案: