我正在尝试使用 ng-repeat 将 JSON 数据发布到 DOM使用 AngularJS。它有效，但不适用于所有情况。仅发布随机数据。我假设问题出在 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);
});
});
最佳答案
我认为现在应该可以了
<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>
关于javascript - 为什么只有部分 JSON 数据而不是全部发送到 DOM？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50992512/