使用 Angular JS 在提交时隐藏表单

Posted 2023-03-05

【中文标题】使用 Angular JS 在提交时隐藏表单

【英文标题】：Hide form on submit with Angular JS

【发布时间】：2015-07-22 15:23:18

【问题描述】：

试图围绕一些 Angular 项目，并通过教程进行编辑和学习。

点击下面的按钮显示下面的表格。提交表单后如何撤销此操作？意味着在提交时隐藏表单，直到再次单击该按钮。

<button ng-click="addNewClicked=!addNewClicked;" class="btn btn-sm btn-primary">
    <i class="fa fa-plus"></i>Add Task
</button>

基本上，表单会出现，我输入一些内容并提交，但希望表单在提交时消失？考虑与 ng-hide 有关，但我可以只使用 Angular 来做到这一点吗？还是我需要用 javascript/css 做点什么？

<div id="addForm" class="margin-full-5">
<form ng-init="addNewClicked=false; " ng-if="addNewClicked" id="newTaskForm" class="add-task">
    <div class="form-actions">
        <div class="input-group">
            <input type="text" class="form-control" name="comment" ng-model="taskInput" placeholder="Add New Task" ng-focus="addNewClicked">
            <div class="input-group-btn">
                <button class="btn btn-default" type="submit" ng-click="addTask(taskInput)">
                    <i class="fa fa-plus"></i>&nbsp;Add Task
                </button>
            </div>
        </div>
    </div>
</form>

【参考方案1】：

您还可以使用 Angular 表单的属性 $submitted、ng-hide 和 ng-submit 的组合来实现此目的

<form name="myForm" ng-hide="myForm.$submitted" ng-submit="submit()">
    <button>Submit</button>
</form>

在这里阅读：https://docs.angularjs.org/api/ng/type/form.FormController

【参考方案2】：

在你的视野中。

<button ng-click="showTheForm = !showTheForm">Add a Task</button>

<form ng-show="showTheForm" ng-submit="processForm()">
    <button>Submit</button>
    <button type="button" ng-click="showTheForm = false">Cancel</button>
</form>

控制器中的某处

$scope.processForm = function() 
    // execute something
    $scope.showTheForm = false;

【参考方案3】：

您的表单正在显示如果 addNewClicked 值评估为 true，当您单击添加任务按钮时会发生这种情况。如果您希望表单在提交时消失，您只需将 onClick 设置为该按钮，将您的 addNewClicked 更改为 false。

AngularJS Docs for Ng-If

【参考方案4】：

您可以按照下面的示例使用 ng-show/ng-hide 来做到这一点：

<form ng-init="addNewClicked=false; " ng-if="addNewClicked" ng-hide="hideform" id="newTaskForm" class="add-task">

并修改提交方法，使 hideform = true;

$scope.addTask = function(input)
... your things
$scope.hideform = true; 

你也可以使用 jQuery 做同样的事情：

$("#newTaskForm").hide(); 

【讨论】：

可以使用 ng-if，但如果您只想显示/隐藏它，那么最好使用 ng-show/ng-hide 而不是 ng-if，因为它会从 dom 对象中删除表单.

【参考方案5】：

这应该可以解决问题：

$scope.addTask = function(taskInput) 
    ...
    $scope.addNewClicked = false; 

【参考方案6】：

您可以使用ng-show，正如您在此jsfiddle 中看到的那样

这将根据单击按钮显示和隐藏 div 元素。单击按钮时，它将切换布尔值，因此充当ng-show的开/关开关