angularjs - 如何在 angularjs 中使用 ng-options 将对象关联为模型

Question

假设我有两个对象:颜色和衬衫。

每件衬衫可以有多种属性以及多种颜色，这基本上是一组颜色对象。

function MyCntrl($scope) {
    $scope.colors = [
        {
            label:"Red",
            value:"r-e-d",
            available:true
        },
        {
            label:"Blue",
            value:"b-l-u-e",
            available:false
        }   
    ];

    $scope.shirts=[{
        size:"M",
        cost:100,
        colors:[ ]
    }
    ]
}

如何使用 ng-options 向 shirts.color 添加/删除 color 对象？

我想将 scope.color 对象关联到 scope.shirts.color 对象，这样如果我更改颜色名称或颜色代码之类的内容，那么shirts.colors 中关联的 color 对象中的相应项目也应该自动更新。

根据我对 ng-options 和 ng-model 的了解，我将不得不为颜色创建新对象并根据在选择框，但这些对象将独立于颜色对象，更改颜色对象不会更新衬衫中的相应对象。

预先感谢您的回复。

Answer 1

你可以直接使用ng-options:

Color: <select multiple ng:model="shirt.colors" ng:options="c.value as c.label for c in colors"></select>

这是一个 Plunker:http://plnkr.co/edit/FQQxrSE89iY1BnfumK0A?p=preview

更新

关于源 colors 的编辑:如果在衬衫的颜色中你只存储值，那么将很难检测到项目被更改的内容并在选项中重新选择它(更改选择的项目取消选择因为 AngularJS 不知道改变的原因)。

作为解决方法，您可以选择对象，而不是值。我已经更新了 plunker。