I've got this interesting object structure:
$scope.hobbies = {
list: [
{
"PersonId": 23,
"PersonName": "John Smith",
"Hobbies": [
{
"HobbyTitle": "Paragliding",
"HobbyId": 23
},
{
"HobbyTitle": "Sharking",
"HobbyId": 99
}
]
}
]
};
Currently, I'm working on creating a view that allows users to select hobbies for each person.
If you want to take a peek at my progress so far, here's a link to the plunker here.
The issue I'm facing is that all selected hobbies are showing up under every person. This happens because I'm simply adding all selected hobbies to a single selectedHobbies array.
$scope.addHobbyItem = function (item) {
var index = $scope.selectedHobbies.list.indexOf(item);
if (index === -1) {
$scope.selectedHobbies.list.push(item);
}
};
This approach doesn't quite cut it, as each selected hobby ends up being displayed under every person. How can I modify the code to align with the ng-repeat loop over the selectedHobbies?
For reference, below is the HTML snippet I'm working with. Also, there's a directive in place to detect clicks on the hobby container and call the addHobbyItem() function:
<div data-ng-repeat="personHobby in hobbies.list">
<div>
<div style="border: 1px solid black; margin: 10px 0 10px">
<strong>{{ personHobby.PersonName }}</strong>
</div>
</div>
<div class="">
<div class="row">
<div class="col-xs-6">
<div data-ng-repeat="hobby in personHobby.Hobbies" data-ng-if="!hobby.selected">
<div data-hobby-item="" data-selected-list="false" data-ng-class="{ selected : hobby.selected }"></div>
</div>
</div>
<div class="col-xs-6">
<div data-ng-repeat="hobby in selectedHobbies.list">
<div data-hobby-item="" data-selected-list="true"></div>
</div>
</div>
</div>
</div>
</div>