Question

这应该很简单，但我不知道该怎么做。我有一个选择控件，如下所示：

<div class="form-group" ng-class="{ 'has-error' : saveForm.status.$invalid && !saveForm.status.$pristine }">
    <label class="control-label">Status</label>
    <select class="form-control" name="status" ng-options="status.name for status in controller.statuses.data track by status.id" ng-model="controller.model.data.statusId" required>
        <option value="">Select a status</option>
    </select>
</div>

ng-model 绑定到 controller.model.data.status ，因为当时我想要整个对象。现在我只需要选择 id ，因此我将 ng-model 更改为 controller.model.data.statusId ，正如您所期望的那样整个状态对象现在绑定到该模型位置。如何在选择控件中显示名称的同时选择 id 而不是整个对象？

请求的codepen示例：

http://codepen.io/r3plica/pen/yNgLqp

Answer 1

我更喜欢ng-options中的select as语法。（这不适用于track by）。具体来说，我喜欢这种形式 select as label for value in array，可让您根据显示的内容（select）更改实际绑定内容（label）。

从文档中，语法有4个部分：

select这是您实际想要绑定的表达式。它通常是数组中元素的属性。在您的情况下，它是status.id
label这是确定如何在下拉列表中显示对象的表达式。同样，这通常是一个属性，但它实际上可以是任何角度表达式（如status.name + ': ' + status.description）在你的它只是status.name
value是您要用于数组的单个元素的名称（别名）。在你的status中，它只是一个名称，所以你可以把它改成几乎任何东西（你也必须改变select和label）
array显然是您要用作下拉数据源的数组。在你的controller.statuses中。

在您的代码中完全组装：

ng-options="status.id as status.name for status in controller.statuses"

AngularJs ng-options获得id

1 个答案: