从重复中显示和隐藏div

时间:2015-01-07 07:14:09

标签: angularjs

我有一个标题并对重复的标题发表评论。

我想要做什么,首先隐藏帖子下方的所有输入,然后点击按钮下方的显示输入,仅显示该帖子的输入。基本上是一个切换但在重复内部。

$scope.posts = [{"_id":"5","post":"second post","created_at":"2015-01-07T07:11:37.477Z"},{"_id":"542","post":"first post","created_at":"2015-01-07T07:11:30.922Z"}]

<div class="col-sm-12 margin-top-10" data-ng-repeat="post in posts track by $index">
        <h4>{{post.post}}</h4>
        <button type="button" class="pull-right btn btn-xs">
            show input below
        </button>
        <h6 data-ng-repeat="comment in post.comments track by $index">{{comment}}</h6>
        <form name="form.comment">
            <input class="col-sm-12" type="text" name="commentText" ng-model="commentText" ng-keyup="$event.keyCode == 13 ? takeComment(post._id, commentText) : null" required>
        </form>
        <br>    
        <br>
        <br>
    </div>

1 个答案:

答案 0 :(得分:0)

$scope.posts = [{"_id":"5","post":"second
post","created_at":"2015-01-07T07:11:37.477Z"},{"_id":"542","post":"first
post","created_at":"2015-01-07T07:11:30.922Z"}]

<div class="col-sm-12 margin-top-10" data-ng-repeat=
"post in posts track by $index">
    <h4>{{post.post}}</h4><button class="pull-right btn btn-xs" type=
    "button" ng-click="post.show = !post.show">show input below</button> <--- add ng click

    <h6 data-ng-repeat="comment in post.comments track by $index">
    {{comment}}</h6>

    <form id="form.comment" name="form.comment" ng-show="post.show"> <--- add ng show
        <input class="col-sm-12" name="commentText" required="" type=
        "text">
    </form><br>
    <br>
    <br>
</div>