Question

我正在使用ng-repeat。在ng-repeat中我重复面板。面板主体由两部分组成。第一部分是一个paragragh，我使用$ http.get（）从数据库中获取。在第二部分我有一个按钮（编辑按钮）。当我单击编辑按钮时，应该隐藏第一部分中的段落，并且文本区域应该出现，段落中的内容作为默认值。但是当我尝试当我点击一个编辑按钮时，我的所有paragragh隐藏和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

使用ng-rpeat对象添加this对象。所以它将与数组对象一起考虑。并且您可以通过click function()传递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; };对象设置为true / false。

代码看起来像。

{{1}}

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 代替此

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

为了使其有效，我们需要修改对象......

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

中使用了 rec

尝试此操作以备注释

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

2 个答案: