我只是想显示用户放在评论框中的评论。但是,我遇到了问题,因为它在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;
})
}])
有人可以帮我看一下评论。当你开始玩它时,你会明白为什么它比问题听起来更难!
答案 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>