Warum zeigt meine ng-Wiederholung keine gezogenen Daten an?

Question

Ich verfolge einen Winkel tutorial wo ich meinen Code in John Papa versuchen style guide denn ich zur Zeit eine Tabelle von Github repos versucht bin Angular 1.

zu formatieren, von einem beliebigen Benutzername anzuzeigen, die in das Suchformular eingegeben wird. Alles andere wird angezeigt, außer den Repos.

Bitte finden Sie einen Link zum Code auf plotker.co ->here.

Dies ist der unter HTML-Template-Code ist:

<div ng-controller="UserController as github"> 
    <h4>{{ github.user.name }}</h4> 
    {{ github.error }} 
    <img ng-src="{{ github.user.avatar_url }}" title="{{ github.user.name }}" /> 
</div> 

<div class="input-field col s12"> 
    <select ng-model="github.repoSortOrder"> 
    <option value="+name">Name</option> 
    <option value="-stargazers_count">Stars</option> 
    <option value="+language">Language</option> 
    </select> 
    <label>Order By:</label> 
</div> 

<table class="col"> 
    <thead> 
    <tr> 
     <th>Name</th> 
     <th>Stars</th> 
     <th>Language</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr ng-repeat="'repo in github.repos | orderBy: github.repoSortOrder'"> 
     <td>{{ repo.name }}</td> 
     <td>{{ repo.stargazers_count | number }}</td> 
     <td>{{ repo.language }}</td> 
    </tr> 
    </tbody> 
</table> 

<br> 

<a href="#/main">Back to search</a> 

<script type="text/javascript"> 
    $(document).ready(function() { 
    $('select').material_select(); 
    }); 
</script> 

Und das ist der Code js Usercontroller:

// Code goes here 

(function() { 
    angular 
    .module('app.github') 
    .controller('UserController', ['github', '$routeParams', '$log', function UserController(github, $routeParams, $log) { 

     var vm = this; 

     var onUserComplete = function(data) { 
     vm.user = data; 
     github.getRepos(vm.user) 
      .then(onRepos, onError); 
     }; 

     var onRepos = function(data) { 
     $log.info('getting data'); 
     vm.repos = data; 
     $log.info('finished getting data'); 

     }; 

     var onError = function(reason) { 
     vm.error = "Boo! Could not fetch the user data!"; 
     }; 

     vm.username = $routeParams.username; 
     vm.repoSortOrder = "-stargazers_count"; 
     github.getUser(vm.username).then(onUserComplete, onError); 

    }]); 

}()); 

Schließlich ist dies die "Github Dienstzeit als Abhängung an die Steuerung:

(function() { 

    angular 
    .module('app.github') 
    .factory('github', ['$http', '$log', function github($http, $log) { 
     var getUser = function(username) { 
     return $http.get("https://api.github.com/users/" + username) 
      .then(function(response) { 
      return response.data; 
      }); 
     }; 
     var getRepos = function(user) { 
     $log.info('starting getRepos()'); 
     return $http.get(user.repos_url) 
      .then(function(response) { 
      $log.info('ending getRepos()'); 
      return response.data; 
      }); 
     }; 

     return { 
     getUser: getUser, 
     getRepos: getRepos 
     }; 

    }]); 

})(); 

Darf ich bitte irgendjemandes eingeben?

Dank

AlvSovereign

Answer 1

Das in einfache Anführungszeichen eingewickelt wird, die Winkel als String auswertet:

<tr ng-repeat="'repo in github.repos | orderBy: github.repoSortOrder'"> 

muss es sein:

<tr ng-repeat="repo in github.repos | orderBy: github.repoSortOrder"> 

Answer 2

Der Fehler ist in der ersten Zeile. Sie haben den Controller nur an dieses div gebunden.

<div ng-controller="UserController as github">//here 
    <h4>{{ github.user.name }}</h4> 
    {{ github.error }} 
    <img ng-src="{{ github.user.avatar_url }}" title="{{ github.user.name }}" /> 
</div> 

Setzen Sie ein div um das ganze Ding sollte das beheben. Zusammen mit dem unten erwähnten ng-repeat-Fehler von @robj.