Aktion nur die angeklickte Taste in ng-Wiederholung

Question

Ich arbeite mit ng-repeat. In der ng-Wiederholung wiederhole ich panel.The Panel Körper besteht aus zwei Teilen. Der erste Teil ist ein paragraph, die ich holen aus der Datenbank mit $ http.get(). Im zweiten Teil habe ich eine Schaltfläche (Bearbeitungsschaltfläche). Wenn ich auf die Bearbeitungsschaltfläche klicke, sollte der Absatz im ersten Teil ausgeblendet werden und der Textbereich sollte mit dem Inhalt im Absatz als Standard erscheinen. Aber wenn ich es versuche erreiche das ich bekomme eine idee wenn ich auf einen edit button klicke alle meine paragagh hides und der textarea erscheinen. Wie kann ich das einschränken?

$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; 
    }; 

Verwenden rec statt diese

Da diese aktuellen Kontext von ng-repeat Richtlinie bedeutet ..

So ist es effektiver zu machen brauchen wir um das Objekt zu ändern ...

Daher müssen wir es passieren, wie ich rec in Funktion param verwenden

Versuchen Sie dies, falls Sie einen Kommentar

Answer 2

Fügen Sie den editorEnabled Objekt mit ng-rpeat Objekt. so wird es mit dem Array-Objekt berücksichtigt werden. und Sie können this aktuelles Objekt über click function() übergeben und true/false das editorEnabled Objekt setzen.

Code sieht aus wie.

 <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; 
     };