如何在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中提交後隱藏表單

回答

相關問題