AngularJS按钮显示/隐藏注释框

Question

我一直在学习AngularJS并决定在其中完成我的项目，我需要一个按钮帮助。 我正在建立一个博客平台，我希望对帖子发表评论。

这是我的帖子：

我想要做的是当我点击评论按钮，在两个帖子之间切换评论框（下面有另一篇文章），我可以在其中输入评论，当我提交评论时，框会消失。 / p>

我希望我很清楚。如果需要，我可以提供任何必要的代码。 谢谢。

Answer 1

代码会有所帮助，因此人们可以引用您需要修改的确切html元素。

我也一直在学习Angular，我相信你需要做的是在评论部分使用ng-show指令。像这样：

<div class="comments" ng-show="add-comment">
....
</div>

add-comment需要是一个布尔变量，或者是一个在注释/博客控制器中解析为布尔值true / false的表达式。

ngShow指令 - API参考： https://docs.angularjs.org/api/ng/directive/ngShow

这是一个由Angac上的codeacademy提供的一个很棒的（免费）教程，它完全讲述了如何在几乎相同类型的上下文中完成此操作。 http://campus.codeschool.com/courses/shaping-up-with-angular-js/intro

Answer 2

对于此类行为，您可以使用指令ng-click管理按钮上的单击事件和ng-show指令以隐藏和显示要显示的控件或部分。 ng-show，根据提供给ngShow属性的表达式显示或隐藏给定的HTML元素，通过删除或添加.ng-hide CSS类来显示或隐藏元素。因此，您可以在模板中使用该指令：

 <button ng-click="showCcommentWrapper = true">Comment</button>
 <div ng-show="showCcommentWrapper">
    Comment Wrapper
    <button ng-click="showCcommentWrapper = false"> Submit Comment</button>
 </div>