I have a simple json load list which uses angular directive to render the data from local json.
I wanted to display likes in a separate column and dislikes in the separate column. but I tried the below code snippet, but achieved likes in first column but not sure how to render dislikes in the second column.
Here is the 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":"Glutenfree 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"
]
}
]
}
Controller:
$http.get('people.json').success(function(response) {
$scope.artists = response;
});
$scope.setSelectedArtist = function(artist) {
$scope.items = artist;
};
Try the following:
<tr ng-repeat = "favourites in items.Likes">
<td>{{ favourites }}</td>
<td ng-if="$index <= items.Dislikes.length-1">{{items.Dislikes[$index]}}</td>
</tr>
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments