Question

您好我正在尝试使用angularjs实施Facebook类型的帖子和回复评论。以下是我的代码

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

现在我面临的问题是（假设我发布了3条评论），我无法为该特定评论（链接）打开回复（textarea），而是打开所有评论的textarea（回复）点击任何评论链接时。我无法解决这个问题。还有其他方法可以解决吗？任何帮助表示赞赏。

由于

我也正在附着图像 Posting comments

while clicking the 2nd comment link all the textarea(reply) gets opening

Answer 1

让$ scope.innerComment成为一个布尔数组。

$scope.innerComment = [];

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

这样，您可以为特定注释设置值true。

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

注意：每当您添加注释时，请在innerComment中按false。

回复Textarea特定帖子（使用textarea），打开所有评论

1 个答案: