javascript - 使用 Angular JS 隐藏提交表单

Question

尝试全神贯注于一些 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>

Answer 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