javascript - 如何使用 ng-repeat 和 Ionic 框架显示嵌套的 JSON 对象？

Question

我正在使用 Ionic 框架开发一个简单的混合移动应用程序。当您搜索姓氏时，系统会发送 GET 请求来检索所有匹配的姓氏，然后显示其相应的 ID。我在显示 JSON 对象返回的数据时遇到问题。

下面是html页面:

<ion-view view-title="Account" ng-controller="AccountCtrl">
<ion-content>
    <div class="list">
        <div class="item item-input-inset">
            <label class="item-input-wrapper">
                <input type="text" placeholder="Search" ng-model="name">
            </label>
            <button class="button button-small" ng-click="searchUser(name)">
                Go
            </button>
        </div>
    </div>
    <div>
        <ul ng-repeat="user in $results">
            <li>{{user.id}}</li>
        </ul>
    </div>
</ion-content>

接下来是 js 文件，它成功返回一个填充的 JSON 对象，其中包含我需要的所有内容。

angular.module('starter.controllers', [])

.controller('AccountCtrl', ['$scope', '$http', function ($scope, $http) {

$scope.searchUser = function (name) {
    $http.get('https://notrelevantforthis/searchLastName?=' + name).then(function (response) {
        console.log(response.data)

        //Assign JSON obj to results to repeat through and display data
        $scope.results = response.data;

        //To show the actual JSON object is returned
        //var jsonStr = JSON.stringify($scope.results);
        //document.body.innerHTML = jsonStr;

    }, function (error) {
        console.log(error)
    });
};
}]);

现在重要的部分是 JSON 对象本身的结构。我想这就是我感到困惑的地方。结构如下:

{
"response": {
  "totalFound": 275,
  "start": 0,
  "acc": [
    {
      "id": [
        "1"
      ],
      "first_name": [
        "Joe"
      ],
      "last_name": [
        "Smith"
      ]
    },
    {
      "id": [
        "2"
      ],
      "first_name": [
        "John"
      ],
      "last_name": [
        "Doe"
      ]
   }]}
}

我认为我的问题是使用 ng-repeat 迭代 JSON 对象。由于某种原因，没有显示任何数据，但在查看控制台时该对象肯定存在。对于我做错的事情的任何帮助或指导将不胜感激，因为我对此很陌生，并且一直在努力寻找正确的方法来做到这一点。

编辑:尝试使用 ionic 框架提供的集合重复，但出现堆栈限制错误。

Answer 1

当您将 response.data 分配给 $scope.results 时，您实际上是将 HTTP 的响应正文分配给它，它是整个 JSON 对象你的问题中有。如果您想通过这些帐户ng-repeat，您需要实际指向response.data.response.acc。

在您的模板中，它应该只是 ng-repeat="user in results"，results 前面没有 $。

您的 JSON 对象将每个帐户的 id 作为数组列出，我建议只提供不带数组的文字值，否则在您的 ng-repeat 中您必须使用 {{user.id[0]}} 实际打印值而不打印数组本身。

我在这里为您创建了一个示例:http://plnkr.co/edit/GYeF4FzVHl8Og5QTFcDx?p=preview