在angularjs的select指令中从不同的源中设置选中的项

Setting selected item in angularjs select directive from a different source

本文关键字：设置 angularjs select 指令      更新时间：2023-09-26

我正在尝试用Angular JS创建一个表单，让您可以编辑地点(地址，城市等)。

后端运行Django，并通过REST API (Django REST Framework)可用，我通过Restangular服务与之交谈。

对于大多数表单元素，事情都是相当标准的。我有一个场地对象，只是填充项目，例如:

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

但是，每个venue对象都有一个category，在后端，这个category对象是一个外键，所以在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>

显然，这不起作用，即使场地。类别只是一个数字，而类别。而且，它们不是同一个对象。

我可能在这里遗漏了一个明显的解决方案，但如果有任何建议，我将不胜感激。

谢谢!

Track by用于当您希望两个不同的对象在选择框中相等时。事实并非如此。你只需要模型是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
};

相关文章：