Javascript 在控制器中的函数中传递未定义的字符串
这是我的HTML:Javascript 在控制器中的函数中传递未定义的字符串,javascript,html,angularjs,Javascript,Html,Angularjs,这是我的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="
<!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>
我的Angular应用程序
我的社交网站
{{post.title}
{{投票后}}
{{post.comment}}
评论
添加新帖子:
邮递
这是我的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;
};
})
var-app=angular.module('myApp',[]);
应用控制器(“bodyController”,
职能($范围){
$scope.posts=[
{标题:'post 1',投票:5,评论:'Very Nice'},
{标题:'post 2',投票数:25,评论:'good'},
{标题:'post 3',投票:55,评论:'Very Nice'},
{标题:'post 4',投票:15,评论:'Very Nice'},
{标题:'post 5',投票:26,评论:'Very Nice'}
];
$scope.addPost=函数(){
如果(!$scope.title | |$scope.title===''){return;}
$scope.posts.push({
title:$scope.title,
link:$scope.link,
评论:“非常好”,
投票:0
});
$scope.title='';
$scope.link='';
};
$scope.upVote=函数(post){
票数+=1;
};
$scope.downVote=函数(post){
如果(post.voces所以问题是,当您试图设置$scope.comment时,您的$scope.comment是未定义的,我已经修复了它的一个plnkr,是的,您将希望在post对象中有一个数组,该数组保存post上的所有注释,并重复显示您的所有注释。我在post对象上标记了一个newComment字段w这里的注释等待被推送到数组中,下面是对HTML的更改(您还需要按$index进行跟踪,以确保重复条目不会破坏代码!):
以及添加注释功能的更改:
$scope.addComment = function(post){
post.comment.push(post.newComment);
};
将每个帖子comment
做成一个数组…然后推送新的评论$scope.addComment=function(){$scope.posts.comment.push('asd');};我也试过了。但它甚至没有推送评论数组中的'asd'字符串。这是我现在的帖子数组:$scope.posts=[{title:'post 1',vows:5,comment:[]},{title:'post 2',投票:25,评论:[]},{title:'post 3',投票:55,评论:[]},{title:'post 4',投票:15,评论:[]},{title:'post 5',投票:26,评论:[]}];非常感谢。请多解释一点,因为我是angularjsSo新手,您遇到的错误可能是因为没有定义$scope变量,而只是试图像$scope.comment一样使用它,所以我在post对象上使用了newComment键,这是以前定义的,比定义一个完全相同的变量要干净一些w变量。既然post对象被传递到addComment函数中,那么如果你在post对象上用一个键的ng模型在其中定义新成员,你就已经拥有了你所需要的一切,只需要一个变量!我仍然有一个问题。当我发布类似的注释时,它只是不允许我添加更多注释问题是没有跟踪方式,所以重复条目会破坏你的代码!当你重复ng时,你大部分时间都要按$index跟踪,以避免重复条目上的代码被破坏!我更新了plnkr,这样你可以再次看到它的运行
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);
};