回复 Textarea for particular post(using textarea)，开放所有评论

Question

您好，我正在尝试实现类似 post 的 facebook，并使用 angularjs 回复评论。下面是我的代码

<doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>

<body ng-app="myApp" ng-controller="HomeCtrl">

<div class="container" style="margin-top:1%;">
  <div class="row">
      <textarea style="width:500px" ng-model="txt" placeholder="Add a comment..."></textarea></br></br>
      <button type="button" class="btn btn-default" ng-click="postData(txt)" ng-model="btn">post</button>
  </div>
</div>
<div class="container" style="margin-top:1%;">
  <div class="row">
      <div ng-show="comment" ng-repeat="data in datas track by $index">
        {{data}}
          <div>
              <a href="#">Like</a>
              <a href="#" ng-click="showInnerComment($index)">comment</a>
              <a href="#">share</a>
          </div>
           <div ng-show="innerComment">
               <textarea style="width:500px; height:30px;" ng-model="txt1"></textarea></br></br> 
               <button type="button" class="btn btn-default" ng-click="postReplied(txt1)" ng-model="btn" ng-show="postRepBtn">Reply</button>
               <div ng-show="innercmt" ng-repeat="data1 in InnerData">
                 {{data1}}
               </div>
           </div>
      </div>

  </div>
</div>      

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>

  <script>

    var app=angular.module('myApp', []);

    app.controller('HomeCtrl', ['$scope',  function($scope) {

      $scope.comment=false;
      $scope.innerComment=false;
      $scope.datas=[];
      $scope.InnerData=[];
      $scope.innercmt=false;
      $scope.postRepBtn=true;

      $scope.postData=function(txt)
      {
        $scope.comment=true;
        $scope.datas.push(txt);
        $scope.txt='';
      }

      $scope.showInnerComment=function($index)
      {
        console.log($index)
        $scope.innerComment=true;
      }

      $scope.postReplied=function(txt1)
      {
        $scope.InnerData.push(txt1);
        $scope.innercmt=true;
        //$scope.postRepBtn=false;
        $scope.txt1='';
      }

    }]);

  </script>

</body>
</html>

现在我面临的问题是（假设我有 post 编辑了 3 条评论），我无法为该特定评论（link）打开回复（文本区域），而是单击任何评论 link 时，它会打开所有评论的文本区域（回复）。我无法解决这个问题 issue.Or 还有其他方法可以解决吗？？感谢任何帮助。

谢谢

我也在看图

Answer 1

使 $scope.innerComment 成为布尔数组。

$scope.innerComment = [];

现在在你的视图中修改为ng-show="innerComment[$index]"

这样您就可以为特定评论设置真值。

$scope.showInnerComment=function($index)
      {
        console.log($index)
        $scope.innerComment[$index]=true;
      }

注意：每当您添加评论时，请在 innerComment 中推 false。

回复 Textarea for particular post(using textarea)，开放所有评论

Reply Textarea for particular post(using textarea), opening for all the comments

angularjs

angularjs-directive

ng-repeat

angularjs-scope

angularjs-ng-repeat