I'm currently working on developing a form using Angular JS for editing venue details such as address and city.
The backend system is powered by Django and offers a REST API (Django Rest Framework) which I am interfacing with through Restangular services. This setup is functioning smoothly.
For most form elements, the process is straightforward. I have a venue object and populate the fields like this:
<input type="text" ng-model="venue.street">
However, each venue object has a category associated with it, which in Django is represented as a foreign key referencing a category object:
category = models.ForeignKey(Category)
When retrieving a venue from the REST API, the category is identified by the pk/id of the category object. For example:
{
"id": 14,
"name": "test place",
"slug": "test-place",
"country": "Ireland",
"city": "Dublin",
[...etc...]
"category": 1
},
There is also a separate REST endpoint that provides information about the categories:
[
{
"id": 1,
"name": "Rock"
},
{
"id": 2,
"name": "Classic"
},
{
"id": 3,
"name": "Jazz"
}
]
My current challenge lies in setting up a dropdown menu in the form to display category names while submitting only the category ID to the backend. Additionally, I need to pre-select the venue's existing category when the form is initially displayed.
As a newcomer to Angular, my understanding is that Angular fills a select directive with references to the objects themselves rather than simple IDs.
Currently, I have this code snippet:
<select ng-model="venue.category" ng-options="category.name for category in categories track by category.id"></select>
Unfortunately, this approach doesn't work because although both venue.category and category.id are numbers, they are not the same object.
I believe there is likely a straightforward solution that I am missing and would appreciate any guidance you can offer.
Thank you!