为什么我的 ng-repeat 不显示提取的数据？

Question

我正在关注 Angular tutorial where I am trying to format my code in John Papa's style guide Angular 1.

我目前正在尝试显示来自输入到搜索表单中的任何用户名的 table 的 github 回购。除了 repos 之外的所有其他内容。

请在 plunker.co -> here.

上找到代码 link

这是下面的 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

这是用单引号引起来的，angular 将评估为一个字符串：

<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 错误。

为什么我的 ng-repeat 不显示提取的数据？

Why is my ng-repeat not showing pulled data?

angularjs

angularjs-ng-repeat

angularjs-ng-model