Currently facing a challenge with angularjs. Here is the scenario:
I have a Game entity and a Team entity. A Game can have multiple Team objects (ManyToMany Relationship).
In my frontend application, I need to add a new Game with optional Teams. For the Teams, I am using two dropdown menus (one for each team).
However, I am struggling to assign the correct values to the ng-model.
I attempted something like this, but it doesn't seem to be right:
<select class="form-control" ng-options="team.teamname for team in teams
track by team.id" ng-model="game.teams[0]">
<option value="" selected>-- No Team --</option>
</select>
<select class="form-control" ng-options="team.teamname for team in teams
track by team.id" ng-model="game.teams[1]">
<option value="" selected>-- No Team --</option>
</select>
Upon clicking the save button, I encounter an error message "400: Unable to process JSON":
Possibly unhandled rejection: {"data":{"code":400,"message":"Unable to process JSON"},"status":400,"config":{"method":"POST","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam":"callback","data":{"teams":{"0":{"id":1,"games":[{"id":1,"date":20180810}],"teamname":"BVB"},"1":{"id":2,"games":[{"id":1,"date":20180810}],"teamname":"FCB"}},"date":"20180810"},"url":"/api/games","headers":{"Accept":"application/json, text/plain, */*","Content-Type":"application/json;charset=utf-8"}},"statusText":"Bad Request"}
Creating the two Teams for a Game with Postman works fine:
{
"date": 20180810,
"teams": [{"id": 1}, {"id": 2}]
}
Desired Output:
{
"id": 1,
"date": 20180810,
"teams": [
{
"id": 1,
"games": [
{
"id": 1,
"date": 20180810
}
],
"teamname": "BVB"
},
{
"id": 2,
"games": [
{
"id": 1,
"date": 20180810
}
],
"teamname": "FCB"
}
]
}
Any suggestions on how to correctly set the ng-model (Game) with the values from the dropdown menus? Thank you.
I have included a screenshot of the desired form: https://i.sstatic.net/8DA44.png