如何在angularjs中提交后隐藏表单

how to hide form after submitting in angularjs

本文关键字：隐藏 表单 提交 angularjs      更新时间：2023-09-26

我现在正在开发网站，ng-repeat中有编辑注释字段功能。若要编辑备注字段，用户需要先单击显示表单的链接，然后键入并按如下方式保存。问题是，在成功保存后，我无法隐藏该输入。编码如下。

指数。翡翠

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

成功保存后，我尝试将表单隐藏为$scope.showDetails = false;。但它根本不起作用。请帮我解决那个问题。

您正在ngRepeat的$范围内创建showDetails。循环的每次迭代都会创建控制器的$scope的一个新的子$scope。

这样，只需从控制器中设置$scope.showDetails将无法工作。

为了解决这个问题，您需要获得对正在迭代的对象的引用，并设置显示详细信息：

代替：

ng-click="showDetails=!showDetails"

用途：

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

之后，在提交时，您可以通过使用正确的引用或迭代数组的所有iten并将showDetails设置为false来选择要显示或隐藏的iten。

代替：

$scope.showDetails = false;

用途：

application.showDetails = false;

在控制器中设置一个变量并将其值设置为false。在成功执行save（）函数后，将该变量设置为true。在视图页面中，如果该值为true，则在tr上设置ng-show的条件。

相关文章：