ng-repeatのクリックされたボタンのみにアクションを提供する

Question

私はng-repeatで作業しています。ng-repeatはパネルを繰り返しています。パネル本体は2つの部分で構成されています。最初の部分はフェッチするパラグラムです$ http.get（）を使用してデータベースから削除します。 2番目の部分では、ボタン（編集ボタン）があります。編集ボタンをクリックすると、最初の部分の段落が非表示になり、テキスト領域がdefault.Butとしてコンテンツの段落に表示されます。私は1つの編集ボタンをクリックすると、私のparagraghの隠しとテキストエリアが表示されるアイデアを得るこのIMを達成する。どのように私はそれを制限することができます。

$scope.editorEnabled = false; 
 

 
$scope.enableEditor = function() { 
 
    $scope.editorEnabled = true; 
 
};

<div ng-repeat="(key,rec) in recordcomment"> 
 
    <div class="row"> 
 
    <div class="col-md-10"> 
 
     <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
      heading 
 
     </div> 
 
     <div class="panel-body" style="background-color:white;"> 
 
      <p ng-hide="editorEnabled">{{rec.comment}}</p> 
 
      <textarea ng-model="rec.comment" ng-show="editorEnabled"></textarea> 
 
      <button class="btn btn-primary pull-right" ng-click="enableEditor()">Edit</button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

<div class="panel-body" style="background-color:white;"> 
      <p ng-hide="rec.editorEnabled">{{rec.comment}}</p> 
      <textarea ng-model="rec.comment" ng-show="rec.editorEnabled"></textarea> 
      <button class="btn btn-primary pull-right" ng-click="enableEditor(rec)">Edit</button> 
     </div> 

    $scope.enableEditor = function(context) { 
      context.editorEnabled = true; 
    }; 

使用RECの代わりに、この

このはNGリピートディレクティブの現在のコンテキストを意味ので...

だから、効果的にするために、我々は必要オブジェクトを変更する...

は、そこで私たちは、私はケースでこれを試してみてください関数のparamに

をRECを使用していて、それを渡す必要があり

Answer 2

ng-rpeatオブジェクトとeditorEnabledオブジェクトを追加します。配列オブジェクトを考慮する必要があります。現在はclick function()でthisオブジェクトを渡し、editorEnabledオブジェクトをtrue/falseに設定することができます。

コードは次のようになります。

 <div class="panel-body" style="background-color:white;"> 
      <p ng-hide="rec.editorEnabled">{{rec.comment}}</p> 
      <textarea ng-model="rec.comment" ng-show="rec.editorEnabled"></textarea> 
      <button class="btn btn-primary pull-right" ng-click="enableEditor(this)">Edit</button> 
     </div> 

     $scope.enableEditor = function(context) { 
      context.editorEnabled = true; 
     };