Javascript AngularJS将对象数组中的选定选项绑定到仅存储id的模型

我是个新手，需要做一次精神检查。我有一个对象，

$scope.myObject

，它只存储类型列表的id，

myObject.colorId

。然后我有一个类型的对象数组，

$scope.colors=[{id:1，name:“blue”}，

，其中包含每种类型的id/名称。我有一个由这些类型填充的

，我想将它们绑定到

myObject.colorId

，但它不适合我

我可以通过将完整类型（例如

{id:3，name:'white'}

）存储为

myObject

中的属性来实现它，但这似乎不正确。或者我是一个新手，我错过了一些关于AngularJS的基本知识

以下是指向plunker的链接：

以下是我代码的要点：

控制器：

$scope.colors = [
  { id: 9, name: 'black' }, 
  { id: 3, name: 'white' }, 
  { id: 5, name: 'red' }, 
  { id: 4, name: 'blue' }, 
  { id: 7, name: 'yellow' }];

// Works
$scope.myColor = $scope.colors[2]; // red

// Doesn't work, do I really have to keep
// track of the full color object in myObject
// like myObject.color = { id: 5, name: 'red' };
// and not simply the color id?
$scope.myObject = { colorId: 5 };

视图：

使用此代码并查看：

---

track by

仅由angular在后面使用，以了解如何在彼此之间绑定作用域。当某个值可以等于时，可以在

ng repeat

中使用它。例如：

[1,1,3]

如果您尝试遍历上一个数组，它将失败，因为angular将跟踪以键为值的更改。在这种情况下，按id跟踪很有用

在您的情况下，您离解决方案不远：

<!-- Works -->
<select 
  ng-model="myColor" 
  ng-options="color.id as color.name for color in colors track by color.id">
</select>

<select ng-model="myObject.colorId" ng-options="color.id as color.name for color in colors">
</select>

<!-- Works -->
<select 
  ng-model="myColor" 
  ng-options="color.id as color.name for color in colors track by color.id">
</select>