如何使用来自简单关系数据库模型的数据来处理选择输入

Question

我正在使用 Angularjs 插入 API，该 API 从 mysqlk 普通关系数据库中检索数据。

假设我的 bdd 中有这个简单的数据模型：

table car:
  id,
  type_id

table type:
  id,
  label

我有一个 API，它从数据库中检索数据以获取汽车列表和数据库中的静态标签：

http://myapi/car/
response :
   {[{id:1, type_id:2}, {id:2, type_id:3}]}

http://myapi/carstaticlabel/
response :
   {[{id:1, label:convertible}, {id:2, label:limousine}, {id:3, label:pickup}]}

我的目标是首先显示带有类型标签的汽车列表，然后打开一个对话框并能够显示一个包含所选汽车预加载值的表单：

渲染的汽车列表：

1 convertible
2 pickup

id 为 1 的已编辑汽车的渲染表单： 选择汽车类型：

<select>
  <option value="1">convertible</option>
  <option value="2" selected="selected">limousine</option>
  <option value="3">pickup</option>
</select>

---

我尝试了不同的方法，但没有一个是优雅的

解决方案 1

对于汽车列表 更改我的 API 并直接在 car 和 type 之间进行连接以获取带有标签的列表：

http://myapi/car/
response :
   {[{id:1, type_id:2, type:{[id:2, label:limousine]}}, {id:2, type_id:3, type:{[id:3, label:pickup]}}]}

然后我只分配表格：car.id 和 car['type']['label']

ISSUE：每辆车都会包含重复的信息（标签）>>臃肿的信息

对于编辑表单： 我将所选汽车的 json 传递给表单并设置默认值：

<p>type: <select ng-model="car.type"  ng-options="type.label for type in type_list" required></select></p>

我的问题：

当我提交表单时，我没有直接得到 type_id，而是得到了 car.type 对象，所以我需要痛苦地将其转换为 id 以发布到数据库中。 要进行转换，我必须进入 car.type 对象并检索里面的对象，然后检索它的 id...非常不雅。

---

解决方案 2

通过使用数组在 angular 内部“加入”。

问题：以后很难在表单中默认值

---

我迷路了，完成这项简单任务的最佳做法通常是什么？

Answer 1

您应该对数组数据源使用select as label for value in array 语法。您的示例具有复杂的数据结构，即对象数组。所以你需要这样的东西：

<select ng-model="selectedId"
        ng-options="x.id as x.label for x in response">
</select>

我创建了一个小例子 here 来演示建议的解决方案。