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

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

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;成功保存后。但它根本不起作用。请帮我解决这个问题。

来源

2016-03-25 ppshein

尝试在'$ timeout'包装'$ scope.showDetails = FALSE'，可能是消化问题。 –

'writeNote'是否会使用'$ http'使某些AJAX调用将更新发布到您的服务器？ – Arkantos

@Arkantos yap，当然。这是异步调用。 – ppshein

您正在ngRepeat的$范围内创建showDetails。循环的每次迭代都会创建一个新的$ scope作用域的$ scope。

这样，只要从控制器设置$ scope.showDetails将不起作用。

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

相反的：

ng-click="showDetails=!showDetails"

用途：

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

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

相反的：

$scope.showDetails = false;

用途：

application.showDetails = false;

来源

2016-03-25 16:57:44

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

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

来源

2016-03-25 06:28:45

你说的和我所做的一样。 – ppshein

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

回答

相关问题