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

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

Answer 3

您的表单显示 IF ，addNewClicked值的计算结果为true，单击“添加任务”按钮时会出现该值。如果您希望表单在提交时消失，则只需将onClick设置为该按钮即可将addNewClicked更改为false。

AngularJS Docs for Ng-If

Answer 4

您可以使用ng-show / ng-hide执行此操作，如下例所示：

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

并修改submit方法以使hideform = true;

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

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

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

Answer 5

这应该可以解决问题：

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

Answer 6

您可以使用此jsfiddle

中的ng-show ng-show

这将基于单击按钮显示和隐藏div元素。单击该按钮时，它将切换布尔值，因此充当{{1}}的开/关开关

使用Angular JS隐藏表单

6 个答案: