使用Angular JS隐藏表单

Question

Trying to wrap my head around some Angular items and working thru a tutorial to edit and learn.

Clicking the below button shows the below form. How do I reverse this once the form is submitted? Meaning hiding the form on submit until the button is clicked once more.

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

Basically, the form appears, I enter something and submit, but would like the form to dissapear upon submit? Thinking something to do with ng-hide, but can I do this using only Angular? Or do I need to do something with 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

You can also achieve this using a combination of Angular form's attribute $submitted , ng-hide and ng-submit

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

Read about it here: https://docs.angularjs.org/api/ng/type/form.FormController

Answer 2

Somewhere in your view.

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

Somewhere in your controller

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

Answer 3

Your form is displaying IF the addNewClicked value evaluates to true, which occurs when you click the add task button. If you want the form to disappear on submit, you just need to make the onClick to that button change your addNewClicked to false.

AngularJS Docs for Ng-If

Answer 4

You can do that by using ng-show/ng-hide as per example below :

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

and modify the submit method to make the hideform = true;

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

You can also do the same using jQuery :

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

Answer 5

This should do the trick:

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

Answer 6

You could use ng-show as you can see in this jsfiddle

This will show and hide the div element based on clicking the button. When the button is clicked it will toggle the boolean, hence acting as an on/off switch for ng-show