anglejsで投稿した後にフォームを非表示にする方法

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が作成されます。

このようにして、コントローラからの$ scope.showDetailsを設定するだけでは機能しません。

の代わりに：あなたが繰り返し、ショーの詳細を設定されているオブジェクトへの参照を取得する必要がありますことを修正するために

ng-click="showDetails=!showDetails" 

用途：

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

その後、提出するときに、適切な参照を使用するか、配列のすべてのitensを繰り返し、showDetailsをfalseに設定することで、表示または非表示を選択できます。

の代わりに：

$scope.showDetails = false; 

用途：

application.showDetails = false; 

Answer 2

コントローラに変数を設定し、その値をfalseに設定します。save（）関数が正常に実行された後、その変数をtrueに設定します。また、ビューページで、その値がtrueの場合、trにng-showの条件を設定します。