ng-repeatにプルされたデータが表示されないのはなぜですか？

Question

私は角度1

ジョンパパのstyle guideに私のコードをフォーマットしようとしています角度tutorial以下の午前私は現在、検索フォームに入力され、任意のユーザー名からGitHubのレポのテーブルを表示しようとしています。レポを除いて他のすべてが表示されます。

コードへのリンクは、plunker.co - >hereにあります。

これは、以下のHTMLテンプレートのコードです：

<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> 

そして、これがUserControllerでjsのコードです：

// 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); 

    }]); 

}()); 

最後に、これはコントローラに依存として 'githubの' サービスです。

(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 
     }; 

    }]); 

})(); 

私はsomeonesの入力をお願いしますか？

AlvSovereign

Answer 1

おかげでこれは、角度が文字列として評価され、単一引用符で囲まれている：

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

それはする必要があります：

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

Answer 2

誤りがあります最初の行に。コントローラをそのdivにのみバインドしました。

<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> 

これを修正する必要があります。下記の@robjで間違いがあります。