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

Question

我正在使用 ng-repeat。在 ng-repeat 中，我正在重复面板。面板主体由两部分组成。第一部分是我使用 $http.get() 从数据库中获取的段落。在第二部分中，我有一个按钮（编辑按钮）。当我单击编辑按钮时，第一部分中的段落应该被隐藏，并且文本区域应该显示为默认段落中的内容。但是当我试图实现这一点，当我单击一个编辑按钮时，我的所有段落隐藏并出现 textarea。我该如何限制它。

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

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

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

因此我们需要传递它，因为我在函数参数中使用了 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;
         };