由

Question

我试图用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" }
    ];
}

这是输出：

由

Artem的评论

评论由

角度评论

我正在使用AngularJS 1.2.22，如果这可以帮到你。

Answer 1

您的JSON对象可能格式错误。

根据您的目标，它应采用以下格式：

$scope.comments = [
    { id: 1, author: "Artem", text: "Angular comment" },
    { id: 2, author: "Other", text: "Other Angular comment" }
];

Answer 2

您的控制器似乎没有注册。你应该做点什么：

myApp.controller('CommentController', ['$scope', function($scope) {
    $scope.comments = [
        { id: 1, author: "Artem", text: "Angular comment" },
        { id: 2, author: "Other", text: "Other Angular comment" }
    ];
}]);

仅将 myApp 更改为您的模块名称。

Answer 3

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>

Angular DOC

3.您的JSON格式也可能出错。 angular将每个值视为对象。如果您想使用三个值设置object，请更改您的JSON。

function CommentController($scope) {
    $scope.comments = [
        { id: 1 ,
         author: "Artem",
         text: "Angular comment" }
    ];
}

Answer 4

@zorza提到的内容也可能是正确的。

除非您的代码中有以下某处，否则您使用了以下内容：

myApp.controller('CommentController', 'CommentController');

为什么ng-repeat-start和ng-repeat-end工作不正常？

由

Artem的评论

评论由

4 个答案: