Providing action to only the clicked button in ng-repeat

Question

I'm working with ng-repeat .In the ng-repeat i'm repeating panel.The panel body consist of two part .First part is a paragragh which i fetch from the database using $http.get(). In the second part i have a button (edit button).When i click the edit button the paragraph in the first part should be hidden and text-area should appear with the content in the paragraph as default.But when i'm trying to achieve this im getting an idea when i click one edit button all of my paragragh hides and the textarea appear .How can i restrict it .

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

Ramesh Rajendran · Answer 1 · 2017-01-11T11:18:24.890

1

Add the editorEnabled object with ng-rpeat object. so it will be consider with the array object. and you can pass this current object via click function() and set true/false the editorEnabled object.

Code looks like.

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

edited Jan 11 '17 at 11:18

answered Jan 11 '17 at 11:13

Ramesh Rajendran

37,412
45
153
234

when i click the button no action happens – dockerrrr Jan 11 '17 at 11:38
Put alert the function and check . also check your console have any issue. if issue there then just change to this line as ` ng-click="enableEditor(rec)">` – Ramesh Rajendran Jan 11 '17 at 11:41
hey i got one more dbt – dockerrrr Jan 11 '17 at 12:01
What doubt, tell me. – Ramesh Rajendran Jan 11 '17 at 12:03
is there any way to make that textarea active when we click the edit. i tried with active class – dockerrrr Jan 11 '17 at 12:06

score 1 · Accepted Answer · answered Jan 11 '17 at 11:36

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

Use rec instead of this

Because this means current context of ng-repeat directive..

So to make it effective we need to modify the object...

Hence we need to pass it as i have use rec in function param

Try this in case do comment

hey bro i got one more dbt – dockerrrr Jan 11 '17 at 12:00 — dockerrrr, Jan 11 '17 at 12:00

Providing action to only the clicked button in ng-repeat

2 Answers2