这是我的 HTML:
<!doctype html>
<html ng-app='myApp'>
<head>
<title>My Angular App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="js/controllers.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
</head>
<body ng-controller='bodyController'>
<div class="heading">
<h1>My Social Website</h1>
<hr>
</div>
<div class="postsCss">
<div ng-repeat="post in posts | orderBy: '-votes'" class="mypost">
<a ng-show="post.link" href="{{post.link}}">{{post.title}}</a>
<span ng-hide="post.link"> {{post.title}}</span>
</br>
<li class="fa fa-thumbs-o-up" ng-click="upVote(post)"></li>
<li class="fa fa-thumbs-o-down" ng-click="downVote(post)"></li>
<span class="counter">{{post.votes}}</span><br>
<span ng-show="post.comment"> {{post.comment}} </span>
<br>
<form ng-submit="addComment(post)" class="myform">
<input type="text" placeholder="Add a Comment..." ng-model="comment"></input>
<button class="button" type="submit">Comment</button>
</form>
</div>
<h2>Add a New Post:</h2>
<form ng-submit="addPost()" class="myform">
<input type="text" placeholder="Add a Post" ng-model="title"></input><br>
<input type="text" placeholder="Link" ng-model="link"></input><br>
<button class="button" type="submit">Post</button>
</form>
</div>
</body>
</html>
这是我的 Controller.js:
var app = angular.module('myApp', []);
app.controller('bodyController',
function($scope) {
$scope.posts = [
{ title: 'post 1', votes: 5 , comment: 'Very Nice' },
{ title: 'post 2', votes: 25, comment: 'good' },
{ title: 'post 3', votes: 55, comment: 'Very Nice' },
{ title: 'post 4', votes: 15, comment: 'Very Nice' },
{ title: 'post 5', votes: 26, comment: 'Very Nice' }
];
$scope.addPost = function(){
if(!$scope.title || $scope.title ==='') { return; }
$scope.posts.push({
title: $scope.title,
link: $scope.link,
comment: 'Very Nice',
votes: 0
});
$scope.title = '';
$scope.link = '';
};
$scope.upVote = function(post){
post.votes += 1;
};
$scope.downVote = function(post){
if(post.votes <1) { return; }
post.votes -= 1;
};
$scope.addComment = function(post){
post.comment = $scope.comment;
};
})
但是当我点击评论按钮时；已经存在的用于调试目的的注释不会被更改，但会被删除，我以其他方式检查了它；来自 HTML 的注释未定义。
最佳答案
所以问题是，当你尝试设置它时，你的 $scope.comment 是未定义的，我已经修复了它的 plnkr ，是的，你会想要在 post 对象中有一个数组，其中包含帖子上的所有评论和 ng-repeat 将显示您的所有评论。我在 post 对象上标记了一个 newComment 字段，其中评论等待被推送到数组中，以下是对 HTML 的更改(您还需要通过 $index 进行跟踪，以确保重复条目不会破坏您的代码!):
<span ng-show="post.comment" ng-repeat="comment in post.comment track by $index"> {{comment}} </span>
<br />
<form ng-submit="addComment(post)" class="myform">
<input type="text" placeholder="Add a Comment..." ng-model="post.newComment" />
<button class="button" type="submit">Comment</button>
</form>
</div
以及对 post 对象的更改:
function($scope) {
$scope.posts = [
{ title: 'post 1', votes: 5 , comment: ['Very Nice' ]},
{ title: 'post 2', votes: 25, comment: ['good']},
{ title: 'post 3', votes: 55, comment: ['Very Nice' ]},
{ title: 'post 4', votes: 15, comment: ['Very Nice' ]},
{ title: 'post 5', votes: 26, comment: ['Very Nice'] }
];
以及添加评论功能的变化:
$scope.addComment = function(post){
post.comment.push(post.newComment);
};
And heres a link to a working plnkr so you can see it in action!
关于javascript - 当我在 Controller 的函数中传递它时未定义的字符串，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34953243/