Question

我正在关注一个Angular tutorial，我试图在John Papa的style guide中为Angular 1格式化我的代码。

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

请在plunker.co上找到代码的链接 - ＆gt; 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

这用单引号括起来，其中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没有显示拉取数据？

2 个答案: