对多个数据对象进行ng-repeate

Question

我正在使用角度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>

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

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

它显示我想要的国家和州，但它最多分为10个国家。而不是10原始。那么我应该改变什么？

Answer 1

应该是，

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

Answer 2

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

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

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

<td>{{ listdata.name }}</td>
<td>{{ listdata.states[0].name }}</td>

或者，如果您想为每个州创建新行：

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

Answer 3

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

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

Answer 4

试试这个

</script>

<div ng-controller="StatesController">
	{{listdata}}
	<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>
			<tr ng-repeat="list in listdata" total-items="totalItems">
				<td>{{list.name}}</td>
				<td ng-repeat="li in list.states">{{li.name}}</td>
				<td class="text-right">
				</td>
			</tr>
		</tbody>
	</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>


<script type="text/javascript">
	angular.module('App', [])
	.controller('StatesController', function($scope) {
		var 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
			}
			]
		}]
		$scope.listdata = data;


	});

	

Answer 5

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

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