Question

我正在尝试使用Angular JS创建一个表单，允许您编辑场地（地址，城市等）。

后端运行Django并通过REST API（Django Rest Framework）提供，我正在通过Restangular服务进行交流。一切正常。

对于大多数表单元素，事情是非常标准的。我有一个场地对象，只需填充项目，例如：

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

但是，每个场地对象都有一个类别，在后端，它是类别对象的外键，所以在Django中这将是：

category = models.ForeignKey(Category)

现在，当通过REST API获取场地时，类别仅由类别对象的pk / id引用。因此，例如，这将是：

{
    "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"
}
]

我的问题是，在编辑场地时，我希望类别的下拉菜单按名称显示类别，但只需将类别ID提供给后端，并在首次显示时预先选择场地的当前类别。

我是Angular的新手，但据我所知，Angular会使用对象本身的引用来填充select指令，而不是像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

跟踪依据是指您希望两个不同的对象在选择框中相等。事实并非如此。你只想让模型成为id本身。 Angular支持这样。

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

在angularjs中设置选定项目从不同的源选择指令

1 个答案: