Настройка выбранного элемента в директиве angularjs select из другого источника

Question

Я пытаюсь создать форму с Angular JS, которая позволяет редактировать место встречи (адрес, город и т. Д.).

Бэкэнд запускает Django и доступен через REST API (Django Rest Framework), с которым я разговариваю через службы Restangular. Все это прекрасно работает.

Для большинства элементов формы все довольно стандартно. У меня есть места проведения объекта и просто заполнить элементы с помощью, например:

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

Однако каждый объект места имеет категорию, которая, на внутреннем интерфейсе, является внешним ключом к категории объекту, поэтому в Django это было бы:

category = models.ForeignKey(Category) 

Теперь, при получении места через REST API, категория просто ссылается рк/идентификатор категории объекта. Так, например, это было бы:

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

И отдельный REST конечной точки, получает мне категории:

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

Моя проблема заключается в том, что при редактировании места, я хотел бы выпадающее меню для категорий, показывающих категории по названию, но просто загружайте идентификатор категории в бэкэнд, а также предварительно выбирайте текущую категорию места проведения, когда она впервые показана.

Я новичок в Angular, но, насколько я понимаю, Angular заполняет выбранную директиву ссылками на сам объект, а не что-то простое, как ID.

На данный момент у меня есть это:

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

Очевидно, что это не работает, даже если venue.category просто номер, а также category.id, они не являются тем же объектом.

У меня, вероятно, отсутствует очевидное решение здесь, но я бы по достоинству оценил любые указатели.

Спасибо!

Answer 1

Отслеживать, когда вы хотите, чтобы два разных объекта были равны относительно поля выбора. Это не так. Вы просто хотите, чтобы модель была самим идентификатором. Угловые поддерживают это так.

http://jsfiddle.net/XLpFN/

Пример:

<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 
};