为什么只有 JSON 的部分数据而不是全部发布到 DOM？

Question

我正在尝试使用 ng-repeat 和 AngularJS 将 JSON 数据发送到 post 到 DOM。它有效，但并非适用于所有情况。只有随机数据得到 posted。我假设问题出在 ng-repeat 中。我做错了什么？

它是这样的：

您可以看到某些部分是如何空白的。这是我将数据记录到控制台时的样子：

这是我的 html:

<html>
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script src="https://dogdatabase-d31f.restdb.io/rest/_jsapi.js"></script>
</head>

<div ng-app="app" style="margin:45px;" ng-controller="ctrl as $ctrl">
<ul>
    <li class="list" style="list-style:none;" ng-repeat="dog in $ctrl.dogs"><strong>{{dog.breed}}</strong>
        <br>
        Description: <span ng-repeat="description in dog.description">{{description}}</span>
        <br>
        Size: <span ng-repeat="size in dog.size" style="color:blue;">{{size}}</span>
        <br>
        Lifespan: <span ng-repeat="lifespan in dog.lifespan" style="color:green;">{{lifespan}}</span>
        <br><br>
    </li>
</ul>
</div>

<script type='text/javascript' src='dogapp.js'></script>
</body>
</html>

这是 JS 文件：

angular.module('app', [])
  .service('dogsService', function($http) {
    var service = {};
    service.getDogs = function() {
      return $http.get('https://dogdatabase-d31f.restdb.io/rest/dogs', {headers: {
        'x-apikey': 'xxxxxxxxxxxxxxxxxxxxxxx'
        }
      }).then(response => response.data);
    };
    return service;
  })
  .controller('ctrl', function(dogsService) {
    var _this = this;
    this.dogs = [];
    dogsService.getDogs().then((data) => {
      _this.dogs = data;

    }).catch((error) => {
      console.error(error);
    });
  });

Answer 1

我想现在应该可以了

<li class="list" style="list-style:none;" ng-repeat="dog in $ctrl.dogs"><strong>{{dog.breed}}</strong>
    <br>
    Description: <span>{{dog.description}}</span>
    <br>
    Size: <span style="color:blue;">{{dog.size}}</span>
    <br>
    Lifespan: <span style="color:green;">{{dog.lifespan}}</span>
    <br><br>
</li>

为什么只有 JSON 的部分数据而不是全部发布到 DOM？

Why is only some of the JSON data posting to the DOM rather than all of it?

javascript

json

dom

angularjs

angularjs-ng-repeat