Select with ng-options and array as value

Question

我有以下数组：

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

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

<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'}

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

你可以在这里找到小提琴：Fiddle

Answer 1

选项框需要包含您尝试选择的项目。由于您要将引用对象放入选项框中，因此您的选项框中必须包含与您希望在默认情况下选择的项目具有相同引用的项目。

我已经在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- name指令时，该对象将具有所选对象的原型以及(在本例中)一个属性选项和一个属性选项

在您的示例中，类似于:{value: ['a'], name: 'A'}

所以要做的第一件事就是用这个形状的对象来设置你的ng-model，让它能够选择一个默认值：

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

然后，ng-options中的track by语法将定义select的默认值。

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

我建议您使用一个像name这样的属性(如果您愿意，也可以创建一个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>

使用这两个更改，您的默认选择将运行