how to hide form after submitting in angularjs

Question

I'm now developing website and there has edit note field features in ng-repeat. To edit note field, user need to click link to display form first then key-in into it and then save it as follow. Problem is i cannot hide that input after successfully saved. Coding is as follow.

index.jade

tr(data-ng-repeat="application in job.applications")
    td.notes
        div.bold #{getMessage('Notes:')}
        div.normal
            div(ng-hide='showDetails')
                {{application.note}}
                .br
                a.admin_edit_gray(href='#', ng-click="showDetails = ! showDetails") Edit Note
            div(ng-show='showDetails')
                textarea.form-control.small-text-font(ng-model='editableTitle', ng-show='showDetails', maxlength="100", ng-trim="false")
                div.editable
                    div(ng-if="editableTitle.length == 100") 
                        | #{getMessage('max 100 symbols.')}
                a.small-text-editButton(href='#', ng-click='save(application, editableTitle, application.id)') Save 
                | | 
                a.small-text-cancelButton(href='#', ng-click="showDetails = ! showDetails") close

controller.js

$scope.showDetails = false;        
$scope.noteFormData = {};
$scope.save = function(application, editableTitle, appId) {
    $scope.noteFormData = {
        appId: appId,
        note: editableTitle
    };
    mytestService.writeNote($scope.noteFormData).then(
        function (notemessage) {
            application.note = notemessage;
            alert('Note is successfully saved.');
            $scope.showDetails = false;
        }
    );
};

I've tried to hide form as $scope.showDetails = false; after successfully saved. But it does not work at all. Please help me how to solve that issue.

Try wrapping $scope.showDetails = false in a $timeout, could be a digest issue. — Darren Reid
– Darren Reid, Commented Mar 25, 2016 at 5:32
Is writeNote making some AJAX call to post the updates to your server using $http ? — Arkantos
– Arkantos, Commented Mar 25, 2016 at 5:50

Rodrigo Branas · Accepted Answer · 2016-03-25 16:57:44Z

1

You are creating showDetails inside the $scope of the ngRepeat. Each iteration of the loop creates a new child $scope of the controller's $scope.

In this way, just set $scope.showDetails from the controller will not work.

In order to fix that you need to get the reference to the object that is being iterated and set the show details:

Instead of:

ng-click="showDetails=!showDetails"

Use:

ng-click="application.showDetails=!application.showDetails"

After that, when submiting, you can choose which one you would like to show or hide by using the correct reference or by iterating over all itens of the array and setting showDetails to false.

Instead of:

$scope.showDetails = false;

Use:

application.showDetails = false;

answered Mar 25, 2016 at 16:57

Rodrigo Branas

5385 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pyae Phyoe Shein Over a year ago

Good explanation and example. Appreciate it.

Bhawna Malhotra · Accepted Answer · 2016-03-25 06:28:45Z

0

set a variable in controller and set its value false .After your save() function is executed successfully set that variable to true. And in the view page put an condition of ng-show on tr if that value that is true.

answered Mar 25, 2016 at 6:28

Bhawna Malhotra

4905 silver badges18 bronze badges

1 Comment

Pyae Phyoe Shein Over a year ago

what you said is same as what I did.

Collectives™ on Stack Overflow

how to hide form after submitting in angularjs

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related