AngularJS如何在 angularjs 提交后隐藏窗体

发布时间: 2017/4/16 12:32:53
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我现在正在开发网站和有编辑注意场特征的 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; 成功保存后。但它不工作。请帮我如何解决这一问题。

解决方法 1:

您正在创建 showDetails 里面的 ngRepeat $scope。每个循环迭代中的创建新的子 $scope 控制器的 $scope。

在这种方式,只是设置的 $scope.showDetails 从控制器将不工作。

为了修复你需要获取对对象被引用迭代和设置显示详细信息︰

而不是:

ng-click="showDetails=!showDetails"

使用方法︰

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

在那之后,当提交,您可以选择哪一个你想要显示或隐藏通过使用正确的引用或通过遍历所有条 】 的数组并将 showDetails 设置为 false。

而不是:

$scope.showDetails = false;

使用方法︰

application.showDetails = false;
赞助商