Предоставление действий только нажатой кнопке в ng-repeat

Question

Я работаю с ng-repeat. В ng-repeat я повторяю панель. Тело панели состоит из двух частей. Первая часть - это параграф, который я выбираю из базы данных с помощью $ http.get(). Во второй части у меня есть кнопка (кнопка редактирования). Когда я нажимаю кнопку редактирования, абзац в первой части должен быть скрытым, а текстовая область должна отображаться с содержимым в абзаце как по умолчанию. Но когда я пытаюсь для этого я получаю идею, когда я нажимаю одну кнопку редактирования, все мои шлемы paragragh и появляются текстовые поля. Как я могу это ограничить.

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

Использование прн вместо это

Поскольку это означает текущий контекст нг-повторить директиву ..

Итак, чтобы сделать его эффективным нам нужно для изменения объекта ...

Поэтому мы должны передать его как я должен использовать ЗАП в функции парам

Попробуйте это в случае, если сделать комментарий

Answer 2

Добавьте editorEnabled объект с ng-rpeat объекта. поэтому он будет рассмотрен с объектом массива. и вы можете пройти текущий объект через click function() и установить true/false объект editorEnabled.

Код выглядит так.

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