Angularjs ng重复多个数据对象

我在和angular js合作。我得到的回应如下：

"data": [
{
  "id": 1,
  "name": "Afghanistan",
  "sortname": "AF",
  "deleted_at": null,
  "created_at": null,
  "updated_at": "2017-01-28 06:36:56",
  "states": [
    {
      "id": 42,
      "name": "Badakhshan",
      "country_id": 1,
      "deleted_at": null,
      "created_at": null,
      "updated_at": null
    },
    {
      "id": 43,
      "name": "Badgis",
      "country_id": 1,
      "deleted_at": null,
      "created_at": null,
      "updated_at": null
    }
  ]
},
{
  "id": 2,
  "name": "Algeria",
  "sortname": "AL",
  "deleted_at": null,
  "created_at": null,
  "updated_at": "2017-01-28 06:36:56",
  "states": [
   {
     "id": 44,
     "name": "Badakhshan",
     "country_id": 2,
     "deleted_at": null,
     "created_at": null,
     "updated_at": null
   }
  ]
}]

所以，现在我想显示国家名称、州名称及其操作等数据，如下所示：

<div ng-controller="StatesController as vm">

    <table class="table table-hover dataTable" id="table-editable">
                    <thead>
                        <tr>
                            <th>Country name</th>
                            <th>State name</th>
                            <th class="text-right">Action</th>
                        </tr>
                    </thead>
                    <tbody dir-paginate="listdata in vm.listdata | itemsPerPage:10" total-items="vm.totalItems">
                        <tr ng-repeat="state in listdata.states">
                            <td>{{listdata.name}}</td>
                            <td >{{state.name}}</td>
                            <td class="text-right">
                                <a class="edit btn btn-sm btn-default" data-toggle="modal" ng-click="vm.edit(state.id,$index)" data-target="#addNew">
                                    <i class="icon-note"></i>
                                </a>
                                <a class="delete btn btn-sm btn-danger" ng-click="vm.remove(state.id,$index)">
                                    <i class="icons-office-52"></i>
                                </a>
                            </td>
                        </tr>
                    </tbody>
                </table>
  </div>

这里，我只有一个国家的名字。州名称不可见

我的角度代码如下所示：

<div ng-controller="StatesController as vm">

    <table class="table table-hover dataTable" id="table-editable">
                    <thead>
                        <tr>
                            <th>Country name</th>
                            <th>State name</th>
                            <th class="text-right">Action</th>
                        </tr>
                    </thead>
                    <tbody dir-paginate="listdata in vm.listdata | itemsPerPage:10" total-items="vm.totalItems">
                        <tr ng-repeat="state in listdata.states">
                            <td>{{listdata.name}}</td>
                            <td >{{state.name}}</td>
                            <td class="text-right">
                                <a class="edit btn btn-sm btn-default" data-toggle="modal" ng-click="vm.edit(state.id,$index)" data-target="#addNew">
                                    <i class="icon-note"></i>
                                </a>
                                <a class="delete btn btn-sm btn-danger" ng-click="vm.remove(state.id,$index)">
                                    <i class="icons-office-52"></i>
                                </a>
                            </td>
                        </tr>
                    </tbody>
                </table>
  </div>

国名
州名
行动
{{listdata.name}
{{state.name}

注意：我想在不同的行中显示每个州以及国家名称

注意：我在这里更改了HTML代码

它可以显示我想要的国家和州，但它最多可以显示10个国家。而不是10块生的。那么我应该改变什么呢？

应该是

<tr dir-paginate="listdata in vm.listdata.data | itemsPerPage:10" 

---

您的
声明
属性是对象中的数组，因此您可以执行以下操作：

<td>{{ listdata.name }}</td>
<td><span ng-repeat="state in listdata.states">{{ state.name }}</span></td>

{{listdata.name}
{{state.name}

或者，如果您只想显示单个状态（第一个状态）：

{{listdata.name}
{{listdata.states[0].name}

或者，如果要为每个州添加新行：

<tbody ng-repeat="listdata in vm.listdata>
    <tr ng-repeat="state in listdata.states">
        <td>{{ listdata.name }}</td>
        <td>{{ state.name }}</dt>
    </tr>
</tbody>

您正试图从数组访问名称，但根据您的json对象，它应该如下所示，同样，您也可以添加标题

<td ng-repeat="stateName in listdata.states">{{stateName}}</td>

{{stateName}
我现在能想到的最简单的方法是：

<td>{{listdata.name}}</td>
<td>
    <span ng-repeat="state in listdata.states">
        {{state.name}}<span ng-if="$index<listdata.states.length">, </span>
    </span>
</td>

{{listdata.name}
{{state.name}}，
当我使用vm.listdata.data时，它不会显示任何内容。您希望如何显示状态：全部显示在一行中（逗号/破折号/换行分隔）还是每个都有自己的行（多个国家行）？@KursadGulseven我希望将每个状态与国家一起显示在不同的行中。使用它时，我无法获得分页和编辑操作。