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

您也可以做到这一点采用了棱角分明形式的属性的组合$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

Answer 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;
}