在AngularJS评论框中显示评论 - 使用API​​ JSON数据在另一个ng-repeat中重复ng-

时间:2016-11-03 18:28:55

标签: angularjs

我只是想显示用户放在评论框中的评论。但是,我遇到了问题,因为它在ng-repeat指令中。让我展示一下,你可以更直观地理解:

<!DOCTYPE html>
<html lang="en" ng-app="MyApp">

<head>
    <meta charset="UTF-8">
    <title>Nuvi Interview Code Project</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="stylesheet.css">
</head>

<body ng-controller="HomeController">
    <div class="container-fluid">
        <h1>Nuvi Interview Code Project</h1>


        <form class="form-inline well well-sm clearfix">
            <span class="glyphicon glyphicon-search"></span>
            <input type="text" placeholder="Search" class="form-control" ng-model="search">
        </form>
        <div class="row">
            <div class="col-sm-6" ng-repeat="actor in data | filter:search">
                <div class="well well-sm">
                    <div class="row">
                        <div class="col-md-6">
                            <img ng-src="{{actor.actor_avator}}" class="img-rounded img-responsive well-image pull-left">
                            <h3 class="name" data-toggle="modal" data-target="#actor-info" ng-click="changeActiveActor(actor)">{{actor.actor_name}}</h3>
                            <hr>

                            <p ng-repeat="say in activity_comments">{{say}}</p>


                            <div>{{actor.activity_comments}} Comments {{actor.activity_likes}} likes {{actor.activity_shares}} shares</div>

                            <br>
                            <input type="text" class="form-control" placeholder="Write a comment..." ng-model="comment">
                            <button class="btn btn-default" ng-click="postComment($index, comment)">Post Comment</button>


                        </div>
                        <div class="col-md-6">

                            <p class="pull-right"><strong>{{actor.provider}} </strong></p>
                            <p><strong>Post</strong></p>
                            <h5>{{actor.activity_message}}</h5>

                            <br><br><br><br><br>

                            <button ng-click="countUp($index)" type="button" class="btn btn-default btn-sm">
                                <span class="glyphicon glyphicon-thumbs-up"></span> Like
                            </button>
                            <button ng-click="countDown($index)" type="button" class="btn btn-default btn-sm">
                                <span class="glyphicon glyphicon-thumbs-down"></span> Unlike
                            </button>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <div class="modal" id="actor-info">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h2>{{activeActor.actor_name}}</h2>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-xs-8 col-xs-offset-2">
                                <img ng-src="{{activeActor.actor_avator}}" class="img-rounded img-responsive">
                            </div>
                        </div>
                        <div class="row top-buffer">
                            <div class="col-md-6">
                                <p>Message: {{activeActor.activity_message}}</p>
                                <p><strong>Username:</strong> {{activeActor.actor_username}}</p>
                                <p><strong>Date:</strong> {{activeActor.activity_date}}</p>
                                <p><strong>Comment:</strong> {{activeActor.activity_comments}}</p>
                                <p><strong>Likes:</strong> {{activeActor.activity_likes}}</p>
                                <p><strong>Sentiment:</strong> {{activeActor.activity_sentiment}}</p>
                                <p><strong>Shares:</strong> {{activeActor.activity_shares}}</p>
                                <p><strong>ID:</strong> {{activeActor.id}}</p>
                                <p><strong>Provider:</strong> {{activeActor.provider}}</p>
                            </div>
                            <div class="col-xs-12">
                                <p></p>
                                <button class="btn btn-danger pull-right" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- END OF MODAL -->



        <hr>
        <h6 class="pull-right">Coded by Saia Fonua</h6>

    </div>




    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <script src="app.js"></script>

</body>

</html>

这是我的app.js:

var app = angular.module("MyApp", []);

app.controller("HomeController", ["$scope", "$http", function($scope, $http) {
    $scope.data = [];
    $scope.search = "";
    $scope.comment = "";
    $scope.activeActor = {};
    $scope.changeActiveActor = function(index) {
        $scope.activeActor = index;
    }



    $scope.postComment = function(index, comment) {
        console.log('comment ', comment);
        //$scope.data[index].comments = [];
        $scope.data[index].comments.push(comment);
        console.log($scope.data[index]);
    }


    $scope.countUp = function(index) {
        $scope.data[index].activity_likes++;

    }
    $scope.countDown = function(index) {
        $scope.data[index].activity_likes--;
    }

    $http.get("https://nuvi-challenge.herokuapp.com/activities").then(function(response) {
        console.log(response.data);
        $scope.data = response.data;
    })
}])

有人可以帮我看一下评论。当你开始玩它时,你会明白为什么它比问题听起来更难!

1 个答案:

答案 0 :(得分:0)

这行有一些问题

<p ng-repeat="say in activity_comments">{{say}}</p>

当您将评论添加到

$scope.data[index].comments.push(comment);

actor.comments 对象

将触及它们
<p ng-repeat="say in actor.comments">{{say}}</p>