在前端显示角度JSON数组

Question

I have my data in the following format,

        var data = [{"time":1,"description":"Here lies 1","cost":"10"},{"time":2,"description":"Here lies 2","cost":"20"},{"time":3,"description":"Here lies 3","cost":"10"},{"time":4,"description":"Here lies 3","cost":"10"}]    

which I am trying to render using

<div class="container">
                <h3 class="text-center">Welcome to our scheduling page. Please follow the instructions to add an event to my calendar.</h3> 
             <div ng-app="TimeSlot">
                <div class="col-md-12" ng-controller="TimeSlotController as calendar" >
                     <div class="col-md-5 col-md-offset-1 timeblock" ng-repeat="slots in calendar.timeslot" ng-click="">
                        <h3 class="event-type-name">{{slots.time}} Hour Appointment</h3>
                        <div class="description mts">{{slots.description}}</div>
                        <div class="cost">{{slots.cost }}</div>
                     </div>
                </div>

             </div> 

        </div>

and

var timeslots = data;

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

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

    this.timeslot = timeslots;

});

The divs are repeating according to the number of objects but the values are not getting inserted into the view, why is that so ?

This might look a repeat of my previous question but it's not exactly the same, sorry if I am repeating though.

Answer 1

I think your code is wrong.. try this

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

    $scope.timeslot = timeslots;

});



<div ng-app="TimeSlot">
     <div class="col-md-12" ng-controller="TimeSlotController" >
        <div class="col-md-5 col-md-offset-1 timeblock" ng-repeat="slots in timeslot" ng-click="">
            <h3 class="event-type-name">{{slots.time}} Hour Appointment</h3>
            <div class="description mts">{{slots.description}}</div>
            <div class="cost">{{slots.cost }}</div>
        </div>
     </div>
</div>

Answer 2

My problem was with handlebars, so I simply used the interpolate provider to fix it.

https://docs.angularjs.org/api/ng/provider/ $interpolateProvider