我试图用Angular JS(也使用Laravel)构建一个简单的评论应用程序,这里是一个代码:
<div ng-controller="CommentController">
<div ng-repeat-start="comment in comments" class="comment">
<h3>Comment {{ comment.id }} <small>by {{ comment.author }}</small></h3>
<p>{{ comment.text }}</p>
</div>
<div ng-repeat-end></div>
</div>
</div>
这是我的JS文件:
function CommentController($scope) {
$scope.comments = [
{ id: 1 },
{ author: "Artem" },
{ text: "Angular comment" }
];
}
这是输出:
角度评论
我正在使用AngularJS 1.2.22,如果这可以帮到你。
答案 0 :(得分:2)
您的JSON对象可能格式错误。
根据您的目标,它应采用以下格式:
$scope.comments = [
{ id: 1, author: "Artem", text: "Angular comment" },
{ id: 2, author: "Other", text: "Other Angular comment" }
];
答案 1 :(得分:1)
您的控制器似乎没有注册。你应该做点什么:
myApp.controller('CommentController', ['$scope', function($scope) {
$scope.comments = [
{ id: 1, author: "Artem", text: "Angular comment" },
{ id: 2, author: "Other", text: "Other Angular comment" }
];
}]);
仅将 myApp 更改为您的模块名称。
答案 2 :(得分:0)
1.不需要ng-repeat-start和ng-repeat-end指令。这些指令背后的任何特殊原因?
2.可以通过仅使用ng-repeat实现此目的。
如果你想使用这两个指令。试试这个
<div ng-controller="CommentController">
<div ng-repeat-start="comment in comments" class="comment">
<h3>Comment {{ comment.id }} <small>by {{ comment.author }}</small></h3>
</div>
<div ng-repeat-end></div>
<p>{{ comment.text }}</p>
</div>
</div>
或者,简单的方法是:
<div ng-controller="CommentController">
<div ng-repeat="comment in comments" class="comment">
<h3>Comment {{ comment.id }} <small>by {{ comment.author }}</small></h3>
<p>{{ comment.text }}</p>
</div>
</div>
3.您的JSON
格式也可能出错。 angular将每个值视为对象。如果您想使用三个值设置object
,请更改您的JSON
。
function CommentController($scope) {
$scope.comments = [
{ id: 1 ,
author: "Artem",
text: "Angular comment" }
];
}
答案 3 :(得分:0)
@zorza提到的内容也可能是正确的。
除非您的代码中有以下某处,否则您使用了以下内容:
myApp.controller('CommentController', 'CommentController');