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。循环的每次迭代都会创建控制器$ scope的新子范围。

这样，只需从控制器设置$ scope.showDetails就行了。

为了解决这个问题，你需要获得对正在迭代的对象的引用并设置show details：

而不是：

ng-click="showDetails=!showDetails"

使用：

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

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

而不是：

$scope.showDetails = false;

使用：

application.showDetails = false;

Answer 2

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

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

2 个答案: