Select 以 ng-options 和数组作为值

Question

我有以下数组：

$scope.array = [{value: ['a'], name: 'A'}, {value: ['a', 'b'], name: 'A/B'}, {value: ['a', 'b', 'c'], name: 'ABC' }];

我想添加一个 select 到我的 html 从数组加载数据。关键是我想把键的值 value 作为选项的值，但它没有正确地 selecting 默认选项。

<select class="form-control" ng-options="element as element.name for element in array track by element.value" ng-model="form.element"></select>

当我启动应用程序时，我用于 ng-model 的对象如下所示：

$scope.form = {element: ['a'], otherField: 'test'}

所以它应该 select 数组的第一个元素作为默认值，但它不起作用。

您可以在此处找到 fiddle：Fiddle

Answer 1

选项框需要包含您尝试 select 的项目。由于您将参考对象放入选项框中，因此您的选项框必须包含一个与您希望默认 select 编辑的项目具有相同参考的项目。

我已经更新了 fiddle

中的 JS

这是新的 JS

function Controller($scope) {
    $scope.array = [{value: ['a'], name: 'A'}, {value: ['a', 'b'], name: 'A/B'}, {value: ['a', 'b', 'c'], name: 'ABC' }];

    $scope.form = {element: $scope.array[0]}
}

Answer 2

当您使用 ng-options 指令时，对象将具有您的 selected 对象的原型（在您的情况下）属性 value 和属性 name

在你的样本中是这样的：{value: ['a'], name: 'A'}

因此，首先要做的是使用具有此形状的对象设置您的 ng-model，以便能够选择默认值：

$scope.form = {element: {value: ['a'], name: 'A'}}

那么您的 ng-options 中的语法跟踪将定义 select 的默认值。

您不能在示例中使用属性 value，因为它是一个数组，并且 ng-options 不知道如何比较数组。 ng-options 可以通过 id、数字或字符串定义默认值。

我建议您使用属性之类的名称（或者如果您愿意，可以创建一个 id）这样 ng-options 将能够确定默认值

<select class="form-control" ng-options="element as element.name for element in array track by element.name" ng-model="form.element"></select>

有了这两个改变你的默认 selection 将运行

Select 以 ng-options 和数组作为值

Select with ng-options and array as value

arrays

angularjs

ng-options