javascript - AngularJS 将对象数组中的选定选项绑定(bind)到仅存储 id 的模型

Question

我是 Angular 的新手，需要进行健全性检查。我有一个对象，$scope.myObject ，仅存储 ID，myObject.colorId ，各种类型的洗衣 list 。然后我有一个类型的对象数组，$scope.colors = [{id:1, name:"blue"}, ...] ，其中包含每种类型的 ID/名称。我有一个 <select>由这些类型填充，我想将它们绑定(bind)到 myObject.colorId但它对我不起作用。

我可以通过存储完整类型来让它工作，例如 { id: 3, name: 'white' } , 作为 myObject 中的属性，但这似乎不对。或者也许我是一个新手，以至于我错过了一些关于 AngularJS 的完全基础的东西。 :)

这是 plunker 的链接: http://plnkr.co/edit/iM5jjeqooQgAn6XGYoL2

这是我的代码的要点:

Controller :

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

查看:

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

<!-- Doesn't Work -->
<select 
    ng-model="myObject.colorId" 
    ng-options="color.name for color in colors track by color.id">
</select>

Answer 1

使用此代码并查看 plunker :

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