javascript - 如何在 angularjs 中使用 ng-repeat 显示 JSON 数组？

Question

这应该很简单，但我无法解决这个问题，也不知道我哪里出错了。我有一个 Angular 模块，它应该重复 JSON 数组的数据；我的 Controller 和模块如下所示

 (function() {

var timeslots = data;

var app =   angular.module('TimeSlot', []);

app.controller("TimeSlotController", function(timeslots) {

    this.timeslots = JSON.parse(timeslots);

});

})();


 <div ng-app="TimeSlot">
                <div class="col-md-12" ng-controller="TimeSlotController as slot" ng-repeat="item in slot.timeslots" >
                     <div class="col-md-4 timeblock">
                        <h3 class="event-type-name">{{ item.time }} Hour Appointment</h3>
                        <div class="description mts">{{ item.description}}</div>
                        <div class="cost"><i class="fa fa-euro"></i>{{ item.cost }}</div>
                     </div>
                </div>

             </div> 

        </div>

        <!-- jQuery -->
        <script src="http://code.jquery.com/jquery.js"></script>
        <!-- Bootstrap JavaScript -->
        <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var data = {{{ timeslot }}}     
        </script>
        <script src="/js/timeslot.js"></script>

这是我要解析的数据，

vardata=[
{
    "time": 1,
    "description": "Here lies 1",
    "cost": "10"
},
{
    "time": 2,
    "description": "Here lies 2",
    "cost": "20"
},
{
    "time": 3,
    "description": "Here lies 3",
    "cost": "10"
}

]

任何帮助将不胜感激，我已经查看了其他帖子，但我无法弄清楚，如果这是重复的帖子，我们深表歉意。

Answer 1

data 是全局的吗？你不能向你的 Controller 注入(inject)简单的变量。
尝试从 Controller 函数中删除参数。
还有为什么要解析已经解析过的数据？

只需将您的数据放入$scope:

app.controller("TimeSlotController", function($scope) {

    $scope.timeslots = timeslots;

});

并在你的 Controller View 中使用它:

<div ng-controller="TimeSlotController">
 <div class="col-md-12" ng-repeat="item in timeslots">
    {{item}}
 </div>
</div>