以ng个重复angularjs显示数组对象

Question

我有一个简单的json加载列表，它使用angular指令来呈现本地json中的数据。

我想在一个单独的列中显示喜欢，在另一个列中显示不喜欢

这是HTML

<ul class="nav">
<li class="active" ng-repeat="item in artists.People">
<a href ng-click='setSelectedArtist(item)'>{{item.name}} 
</a>
</li>
</ul>
<!-- Displaying table -->
<table>  
<tr>  
<th>Likes</th> 
<th>Dislikes</th>  
</tr>  
<tr ng-repeat = "favourites in items.Likes">  
<td>{{ favourites }}</td>  
/* stuck here */
</tr>  
</table>  

JSON:

{
"People":[
{
"name":"Andrew Amernante",
"rating":3,
"img":"http://www.fillmurray.com/200/200",
"Description":"Gluten­free cray cardigan vegan. Lumbersexual pork belly blog, fanny pack put a bird on it selvage",
"Likes":[
"Dogs",
"Long walks on the beach",
"Chopin",
"Tacos"
],
"Dislikes":[
"Birds",
"Red things",
"Danish food",
"Dead Batteries"
]
},
{
"name":"Frank Wang",
"rating":5,
"img":"http://www.fillmurray.com/200/201",
"Description":"Before errors, mails were only pressures. This is not to discredit the idea that a magic is the prose of anelizabeth. This could be, or perhaps some posit the outmost coil to be less than dedal. Some assert that those treatments are nothing more than carp.",
"Likes":[
"Frank",
"Manchester United",
"Football",
"Programming"
],
"Dislikes":[
"Dogs",
"Long walks on the beach",
"Chopin",
"Tacos"
]
}
]
}

控制器：

$http.get('people.json').success(function(response) {
$scope.artists = response;
});
$scope.setSelectedArtist = function(artist) {
$scope.items = artist;
};

Answer 1

即使点赞和不点赞的长度不等于，此代码也能工作

<table>
<thead>
<th>Likes</th>
<th>Dislikes</th>
</thead>
<tbody ng-repeat="items in test.People">
<tr ng-repeat="i in range(items.Likes.length, items.Dislikes.length) track by $index">
<td>{{items.Likes[$index]}}</td>
<td>{{items.Dislikes[$index]}}</td>
</tr>
</tbody>
</table>
$scope.range = function(a,b) {
var n = Math.max(a,b);
return new Array(n);
};

示例JSON

{
"People":[
{
"name":"Andrew Amernante",
"rating":3,
"img":"http://www.fillmurray.com/200/200",
"Description":"Gluten­free cray cardigan vegan. Lumbersexual pork belly blog, fanny pack put a bird on it selvage",
"Likes":[
"Dogs",
"Long walks on the beach",
"Chopin",
"Tacos"
],
"Dislikes":[
"Birds",
"Red things",
"Danish food",
"Batteries",
"Football",
"Dead Batteries"
]
},
{
"name":"Frank Wang",
"rating":5,
"img":"http://www.fillmurray.com/200/201",
"Description":"Before errors, mails were only pressures. This is not to discredit the idea that a magic is the prose of anelizabeth. This could be, or perhaps some posit the outmost coil to be less than dedal. Some assert that those treatments are nothing more than carp.",
"Likes":[
"Frank",
"Manchester United",
"Football",
"Programming",
"Dead Batteries"
],
"Dislikes":[
"Dogs",
"Long walks on the beach",
"Chopin",
"Tacos"
]
}
]
}

输出：

样本输出

Answer 2

尝试以下操作：

<tr ng-repeat = "favourites in items.Likes">  
<td>{{ favourites }}</td>  
<td ng-if="$index <= items.Dislikes.length-1">{{items.Dislikes[$index]}}</td>

</tr>  

Answer 3

试试这个代码：

<table ng-repeat="items in artists.People">  
<tr>  
<th>Likes</th> 
<th>Dislikes </th>  
</tr>  
<tr ng-if="items.Likes.length <= items.Dislikes.length" ng-repeat="d in items.Dislikes track by $index">
<td>{{d}}</td>
<td ng-if="items.Likes[$index]">{{items.Likes[$index]}}</td>
</tr>
<tr ng-if="items.Likes.length > items.Dislikes.length" ng-repeat="d in items.Likes track by $index">
<td>{{d}}</td>
<td ng-if="items.Dislikes[$index]">{{items.Dislikes[$index]}}</td>
</tr>
</table>