AngularJS通過Eventbrite在線上售票事件迭代

Question

我的JSON文件是here. 我HomeController的是：

app.controller('HomeController', ['$scope', 'events', function($scope, events) { 
    events.then(function(data) { 
    $scope.events = data; 
    }); 
    $scope.test="success"; 
}]); 

和我的html文件是：

<a href="#/">Home</a> 
<h1> {{test}} </h1> 
<section class="container" ng-repeat="event in events"> 

<div class="col-sm-4" > 
     <div class="card"> 
     <img class="img-responsive" src="https://s3.amazonaws.com/codecademy-content/projects/red-eye-photography/p1.jpg" /> 
     <div class="block"> 
      <h4 class="card-title">{{event.events[0].name.text}}</h4> 
      <p class="card-text">{{event}}</p> 
      <a href="#" class="btn btn-primary">Go somewhere</a> 
     </div> 
     </div> 
    </div> 

</section> 
<h1>{{test}}</h1> 

，當我在「事件試圖環路發生時我的問題「JSON文件中的數組。 我試圖寫「$ scope.events = data.events;」在Home控制器中，在html文件中的events.events「」或「ng-repeat =」event in events [0]「」中的「ng-repeat =」事件。這打破了循環，沒有顯示任何內容，但是如果我在後面的代碼中使用事件「」中的「ng-repeat =」事件，然後使用變量{{event.events [0] .name.text}}，它一切正常。我不明白爲什麼會有問題。它應該從我以前的經驗中工作得很好。

Answer 1

如果你在你的控制器

$scope.events = data.data.events;

聲明並有這樣的模板：

<section class="container" ng-repeat="event in events"> 

    <div class="col-sm-4"> 
    <div class="card"> 
     <img class="img-responsive" src="https://s3.amazonaws.com/codecademy-content/projects/red-eye-photography/p1.jpg" /> 
     <div class="block"> 
     <h4 class="card-title">{{event.name.text}}</h4> 
     <p class="card-text">{{event}}</p> 
     <a href="#" class="btn btn-primary">Go somewhere</a> 
     </div> 
    </div> 
    </div> 

</section> 

它應該工作。請參閱codepen here