Question

在我的表单中，我想显示一个禁用按钮＆＃34;发送...＆＃34;发布表单时隐藏原始发送按钮。

然后当表单返回成功时，我想隐藏＆＃34;发送...＆＃34;并再次显示原始按钮。

顺便说一句，我正在使用jQuery验证，因为我被迫在这个应用程序中执行它。

HTML

<form id="contactForm" name="contactForm" class="form-grouped" ng-submit="submitContactForm()" default-validate>
<fieldset>
    <legend>Contact</legend>
    <div class="form-group">
        <label for="title">Your email</label>
        <input class="form-control" type="email" ng-model="email" name="email" id="email" required>
    </div>
    <div class="form-group">
        <label for="description">Message</label>
        <textarea class="form-control" ng-model="message" name="message" id="message" rows="5" required></textarea>
    </div>
</fieldset>
<div class="form-actions">
    <input type="submit" value="Sending..." class="btn btn-default" disabled>
    <input type="submit" value="Send" class="btn btn-primary btn-submit">
</div>
</form>

AngularJS

//FORM
$scope.submitContactForm = function () {
    if ($("#contactForm").valid()) {
        //show/hide buttons

        $http({
            url: "data/postContact.aspx",
            data: formFactory.fixData({ email: $scope.email, message: $scope.message }),
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }
        }).success(function (data) {
            console.log(data);
            $scope.email = "";
            $scope.message = "";
            //show/hide buttons
        }).error(function (err) { "ERR", console.log(err) })

    }
};

Answer 1

创建一个类似

的$ scope变量

$scope.showSubmit = true';

位于提交功能的顶部：

$scope.showSubmit = false;

成功回调

$scope.showSubmit = true;

然后将ng-show =“showSubmit”添加到提交按钮，将ng-show =“！showSubmit”添加到发送按钮

在表单中显示/隐藏按钮

1 个答案: