Question

如果我用{{result.title}}调用页面，Json代码工作正常但如果我想调用author的子代，则json元素不起作用

控制器

 var app = angular.module('myApp', []);
 app.controller('customersCtrl', function($scope,$http) {
     $http.get('post.json')
     .then(function (response){
          console.log(response.data);
          $scope.results = response.data.pages,
          $scope.resultauthor = response.data.author;
     });

Json示例

 {
 "pages": [
    {
      "id": 2,
      "type": "page",
      "modified": "2016-08-09 17:28:01",
      "categories": [],
      "author": {
        "id": 1,
        "name": "admin",
        "description": ""
    },
}

HTML

 <div ng-repeat="item in resultauthor">
    {{ item.name }}
    </div>

我的代码出错了？

Answer 1

您需要将resultsauthor更改为resultauthor。

<div ng-repeat="item in resultauthor">
    {{ item.name }}
</div>

Answer 2

根据您提供的json response.data.author将不存在。首先需要从pages数组中检索page项，然后获取该特定元素的作者：

$http.get('post.json')
.then(function (response){
  $scope.results = response.data.pages;
});

除此之外，如果有任何网络或javascript错误，请尝试检查您的控制台，以便为您提供更好的反馈。

<强>更新

您也以错误的方式使用ng-repeat（您需要迭代数组而不是对象以获得预期的行为）。

 <div ng-repeat="item in results">
  {{ item.author }}
 </div>

检查this plunkr。

Answer 3

目前还不完全清楚你要做什么，但author不是数组 - 它是一个对象。如果您想循环浏览author的属性，则需要在(key, value) for object中使用ng-repeat语法。这是一个示例（我必须直接将json数据分配给$scope属性，因为内联片段不支持像post.json文件这样的外部文件。

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
  $scope.results = [{
    "id": 2,
    "type": "page",
    "modified": "2016-08-09 17:28:01",
    "categories": [],
    "tags": [],
    "title": "Title",
    "author": {
      "id": 1,
      "slug": "admin",
      "name": "admin",
      "first_name": "",
      "last_name": "",
      "nickname": "admin",
      "url": "",
      "description": ""
    }
  }];
  $scope.resultauthor = $scope.results[0].author;
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>

<body ng-app="myApp" ng-controller="customersCtrl">
  <div ng-repeat="(key, value) in resultauthor">
    {{ key }}: {{ value }}
  </div>

  <div ng-repeat="result in results">
    <p>{{ result.title }}</p>
  </div>
</body>

儿童json元素Angularjs

3 个答案: