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

试着把我的头绕在一些有角度的项目上，通过一个教程来编辑和学习

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

<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>

添加任务

如果addNewClicked值的计算结果为true，则表单将显示，这发生在单击“添加任务”按钮时。如果希望表单在提交时消失，只需单击该按钮将addNewClicked更改为false

---

您可以使用ng show/ng hide，如下例所示：

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

您也可以使用jQuery执行相同的操作：

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

---

这应该可以做到：

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

---

在你看来的某个地方

<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>

---

您可以使用

ng show

，如图所示

---

这将在单击按钮的基础上显示和隐藏div元素。单击按钮时，它将切换布尔值，因此充当

ng show

的开/关开关。您还可以使用角度形状的属性

$submitted

、

ng hide

和

ng submit

的组合来实现这一点

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

提交

---

请在此处阅读：

可以使用ng if，但如果您只想显示/隐藏它，则在从dom对象中删除表单时，最好使用ng show/ng hide而不是ng if。

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

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