Question

所以我有一个简单的数组values = [0, 1]，它将被提供给

<select ng-model="myValue" ng-options="v for v in values "></select>

在此之后，我将有一个下拉列表，其中包含两个选项：0和1。

但我想要的是：

在网页中，我不想展示0或1，而是false和true。
用户选择一个选项（false或true）后，真实模型myValue应为0或1，而不是{{1} }或false。

我该怎么做？

Answer 1

平面阵列初始化不允许使用标准ng-options执行此操作，因为标签是ng-options初始化的第一部分。

ng-options="label for v in values"

要正确执行此操作，您的选项将更好地格式化：

$scope.values = [
    { label : 'true', value: 1 },
    { label : 'false', value: 0 }
];

这将允许您从for循环

中的对象定义选项标签

<select ng-model="myValue" ng-options="v as v.label for v in values"></select>

如果您希望/必须坚持使用当前的设置，您可以采取以下措施：

var initialValues = [0,1];

$scope.values = [];

// Assuming ES5
initialValues.forEach(function(value, index)
{
    $scope.values.push({
        label : (!!value).toString(),
        value : value
    });
});

并将HTML修改为如上所述。

Answer 2

根据the documentation for ngOptions，您可以使用select as label for value in array形式的表达式，其中label可以任何正确的AngularJS表达式。您可以使用，例如：

<select
    ng-model="myValue"
    ng-options="value as (value ? 'true' : 'false') for value in values"
></select>

Fiddle

当您只有少量可能的值时，这是可以接受的，但如果您的阵列变大，它会变得很快变得不可读：

<select
    ng-model="myValue"
    ng-options="value as (value === 1 ? 'true' : value === 0 ? 'false' : value === -1 ? 'undefined') for value in values"
></select>

在这种情况下，我强烈建议您按照David Barker的建议使用对象。

如何更改选项的标题，但保持值相同？

2 个答案: