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

【问题标题】：how to hide form after submitting in angularjs在angularjs中提交后如何隐藏表单
【发布时间】：2016-07-12 21:19:08
【问题描述】：

我现在正在开发网站，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;。但它根本不起作用。请帮我解决这个问题。

【问题讨论】：

尝试将$scope.showDetails = false 包装在$timeout 中，这可能是一个摘要问题。
writeNote 是否使用 $http 进行 AJAX 调用以将更新发布到您的服务器？
@Arkantos 是的，当然。这是异步调用。
@Layoric 它在 $timeout 中不起作用。

标签： javascript jquery angularjs node.js

【解决方案1】：

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

这样的话，仅仅从控制器中设置$scope.showDetails是行不通的。

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

代替：

ng-click="showDetails=!showDetails"

用途：

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

之后，提交时，您可以通过使用正确的引用或遍历数组的所有元素并将 showDetails 设置为 false 来选择要显示或隐藏的那个。

代替：

$scope.showDetails = false;

用途：

application.showDetails = false;

【讨论】：

很好的解释和例子。欣赏它。

【解决方案2】：

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

【讨论】：

你说的和我做的一样。