如何动态创建内容块然后添加类？

Question

对不起，我不擅长 Angularjs。我需要在点击时创建“评论框”，然后我需要将此“框”插入到 global-wrap-container（它是一个类名）。

这里有我的“评论框”

  <div class="comment-reply-wrap" >
    <div class="comment">
      <div class="info" >
        <div class="left-side-info">
          <img src="img/avatar.png" alt="avatar" class="avatar">
          <span class="name">{{repUsers.name}}</span>
        </div>
        <div class="right-side-info">
          <p class="user-text" ng-bind-html='repUsers.text'>
            <img class="comment-image" src="">
          </p>
        </div>
        <div class="bottom">
          <span class="comment-email">{{repUsers.email}}</span>
          <span class="comment-date">10/29/2010 at 6:40AM</span>
          <button type="submit" class="reply" ng-click="createReplyForm($event)">
            <i class="fa fa-reply" aria-hidden="true"></i>
          </button>
        </div>
      </div>
    </div>
  </div>

这是我推送信息和“评论”出现的功能。

$scope.addRepUser = function() {
$scope.bool = false;

//Dynamically create array of objects and push data
  $scope.repUsers.push({
  name: $scope.repUser.name,
  email: $scope.repUser.email,
  text: $scope.repUser.text
  });


//Clear input fields in main form
$scope.repUser.name = '';
$scope.repUser.email = '';
$scope.repUser.text = ''; };

Answer 1

你必须使用 ng-repeat

<div class="your-class" ng-repat="user in repUsers">
 <span class="comment-email">{{user.email}}</span>
 <span class="comment-date">10/29/2010 at 6:40AM</span>
 <span class="comment">{{user.text}}</span>
</div>

Answer 2

你需要停止思考“插入 div”，这不是 jquery。 在 Angular 中，您可以在 html 中放置一个 div，该 div 将根据您的范围的布尔值显示。

<div ng-show="shouldBeDisplayed"></div>

在控制器中：

function displayDiv(){
    $scope.shouldBeDisplayed = true;
    //use the line below if you want to toggle show
    //$scope.shouldBeDisplayed = !$scope.shouldBeDisplayed;
}

要显示 cmets 列表，需要使用数组：

$scope.comments = [];

提交时，您必须将对象推入此数组。它将显示为ng-repeat：

<div class="your-class" ng-repat="comment in comments">
</div>

这里的机制应该是：

• 点击回复评论
• 控制器应在点击时更新布尔值
• 它将显示您的表单（如果您愿意，还可以隐藏列表）
• 提交表格
• 将值推入所需列表并更新布尔值以隐藏表单

工作小提琴：http://jsfiddle.net/4t37u642/