从其他来源在angularjs select指令中设置所选项目

Question

I'm trying to create a form with Angular JS that lets you edit a venue (address, city etc).

The backend runs Django and is available through a REST API (Django Rest Framework) which I'm talking to via Restangular services. This all works fine.

For most form elements, things are pretty standard. I have a venue object and just populate the items with, for example:

<input type="text" ng-model="venue.street">

However, every venue object has a category which, on the backend, is a foreign key to a category object, so in Django this would be:

category = models.ForeignKey(Category)

Now, when getting a venue through the REST API, the category is just referenced by the pk/id of the category object. So, for example, this would be:

{
    "id": 14,
    "name": "test place",
    "slug": "test-place",
    "country": "Ireland",
    "city": "Dublin",
    [...etc...]
    "category": 1
},

And a separate REST endpoint, gets me the categories:

[
{
    "id": 1,
    "name": "Rock"
},
{
    "id": 2,
    "name": "Classic"
},
{
    "id": 3,
    "name": "Jazz"
}
]

My problem is that when editing the venue, I would like the drop down menu for categories to show categories by name but just feed the category ID to the backend, as well as pre-select the venue's current category when first shown.

I'm new to Angular but, as far as I can understand, Angular populates a select directive with references to the object itself, not something simple like an ID.

At the moment I have this:

<select ng-model="venue.category" ng-options="category.name for category in categories track by category.id"></select>

Obviously, this doesn't work as, even though venue.category is just a number, and category.id also, they are not the same object.

I'm probably missing an obvious solution here but would appreciate any pointers.

Thanks!

Answer 1

Track by is for when you want two different objects to be equal in regards to the select box. This isn't the case. You just want the model to be the id itself. Angular supports this like so.

http://jsfiddle.net/XLpFN/

Example:

<select ng-model="venue.category" ng-options="category.id as category.name for category in categories"></select>

$scope.categories = [ 
    {"id": 1, "name": "Rock"}, 
    {"id": 2, "name": "Classic"}, 
    {"id": 3, "name": "Jazz"}
];

$scope.venue =  {
    "id": 14,
    "name": "test place",
    "slug": "test-place",
    "country": "Ireland",
    "city": "Dublin",
    "category": 2
};