2013-07-30 4 views
5

Ich bin neu bei AngularJs und versuche immer noch herauszufinden, wie die Grundlagen funktionieren ... Ich benutze die Soundcloud API, um eine Liste von Followern für einen bestimmten Benutzer zu erstellen. Bisher kann ich in meiner $scope.init Funktion eine Verbindung zu Soundcloud herstellen, einen Benutzer authentifizieren und eine json-Liste der Follower des Benutzers zurückgeben. Ich schiebe dann jeden Follower in ein Array namens $scope.results und vergewissere mich, dass das Array voll ist, indem ich es in der Konsole ausgabe. Allerdings, wenn ich die Ausgabe jedes Folger als ein Listenelement in dem Array versuchen Sie es mit ng-repeat in meiner main.html Ansicht und ich nichts bekommen ..... hier ist mein Code:AngularJS ng-repeat funktioniert nicht?

main.js

.controller('MainCtrl', function ($scope, $http) { 
    $scope.apiKey = "##########################"; 
    $scope.results = []; 
    $scope.init = function(){ 
    SC.initialize({ 
     client_id: $scope.apiKey, 
     redirect_uri: "http://localhost:9000/callback.html" 
    }); 
    // initiate auth popup 
    SC.connect(function() { 
     SC.get('/me', function(me) { 
     alert('Hello, ' + me.username); 
    }); 

    SC.get('/me/followers', function(followers) { 
     //console.log(followers); 
     //angular.forEach(followers, function(value, index){ 
      angular.forEach(followers, function(follower, index){ 
       $scope.results.push(follower); 
      }); 
      console.log($scope.results); 
    }); 
}); 

main.html // das ist eine Ansicht

`<div ng-init="init()">` 
`<li ng-repeat="follower in results">` 
`<div class="row-fluid">` 
    `<div class="span3">` 
     `<div class="span6">` 
     <h3>{{follower.username}}</h3> 
     <p>{{follower.description}}</p> 
    </div> 
</div> 
</div> 
</li> 
</div> 

index.html

<!doctype html> 
<!--[if lt IE 7]>  <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> 
<!--[if IE 7]>   <html class="no-js lt-ie9 lt-ie8"> <![endif]--> 
<!--[if IE 8]>   <html class="no-js lt-ie9"> <![endif]--> 
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> 
<head> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<title></title> 
<meta name="description" content=""> 
<meta name="viewport" content="width=device-width"> 
<!-- Place favicon.ico and apple-touch-icon.png in the root directory --> 
<!-- build:css styles/main.css --> 
<link rel="stylesheet" href="styles/bootstrap.css"> 
<link rel="stylesheet" href="styles/main.css"> 
<!-- endbuild --> 
    </head> 
    <body ng-app="soundSelectApp" ng-controller="MainCtrl"> 
    <!--[if lt IE 7]> 
     <p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p> 
<![endif]--> 

<!--[if lt IE 9]> 
    <script src="components/es5-shim/es5-shim.js"></script> 
    <script src="components/json3/lib/json3.min.js"></script> 
<![endif]--> 

<!-- Add your site or application content here --> 
<div class="container" ng-view></div> 

<script src="components/angular/angular.js"></script> 
<script src="components/angular-resource/angular-resource.js"></script> 
<script src="components/angular-cookies/angular-cookies.js"></script> 
<script src="components/angular-sanitize/angular-sanitize.js"></script> 

<!-- build:js scripts/scripts.js --> 
<script src="scripts/app.js"></script> 
<script src="scripts/controllers/main.js"></script> 
<script src="http://connect.soundcloud.com/sdk.js"></script> 
<!-- endbuild --> 

<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. --> 
<script> 
    var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']]; 
    (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0]; 
    g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js'; 
    s.parentNode.insertBefore(g,s)}(document,'script')); 
</script> 

Antwort

12

Sie vermissen einen Anruf zu $ ​​apply(), weil Sie arbeiten außerhalb der Winkel Welt zu tun, so versuchen Sie eine Zeile unter Push-Befehl hinzufügen und es sollte funktionieren

angular.forEach(followers, function(follower, index){ 
       $scope.results.push(follower); 
      }); 

$scope.$apply() 
+0

Cool, danke! – accraze