爲什麼我的ng-repeat不顯示拉數據？

Question

在那裏我試圖格式化我在約翰爸爸的style guide代碼角1

目前我正在嘗試從輸入到搜索表單的任何用戶名顯示github上回購的表我下面的角度tutorial。除了回購之外，其他一切都會顯示。

請在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 
     }; 

    }]); 

})(); 

我可以請某人輸入嗎？

由於

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> 

把一個div放在整個事情應該解決這個問題。與@robj在下面提到的ng-repeat錯誤一起。