仅对 ng-repeat 中单击的按钮提供操作

Question

我正在使用 ng-repeat。在 ng-repeat 中，我正在重复 panel.The 面板正文由两部分组成。第一部分是一个段落，我使用 $[= 从数据库中获取它21=]()。在第二部分中，我有一个按钮（编辑按钮）。当我单击编辑按钮时，第一部分中的段落应该被隐藏，文本区域应该与段落中的内容一起显示为 default.But 当我试图实现这一点，当我单击一个编辑按钮时，我得到了一个想法，我的所有 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

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.

代码看起来像。

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

Answer 2

<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 而不是 this

因为this表示ng-repeat指令的当前上下文..

所以为了让它生效我们需要修改对象...

因此我们需要传递它，因为我在函数参数

中使用了rec

试试这个以防发表评论

仅对 ng-repeat 中单击的按钮提供操作

Providing action to only the clicked button in ng-repeat

angularjs

angularjs-ng-repeat

ng-show

ng-hide