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

Question

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

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

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

Answer 1

您正在 ngRepeat 的 $scope 内创建 showDetails。循环的每次迭代都会创建 Controller $scope 的新子 $scope。

这样，仅仅从 Controller 设置 $scope.showDetails 是行不通的。

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

而不是:

ng-click="showDetails=!showDetails"

用途:

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

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

而不是:

$scope.showDetails = false;

用途:

application.showDetails = false;