选择ng-options和array作为值

Question

我有以下数组:

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

我想添加一个选择到我的html加载数据从数组。关键是我想把选项的值，键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'}

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

你可以在这里找到小提琴:小提琴

Answer 1

选项框需要包含您要选择的项。由于您将引用对象放入选项框中，那么您的选项框必须包含一个与您希望选择的项具有相同引用的项。

我已经更新了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指令时，对象将具有您所选择对象的原型(在您的情况下)属性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>

只有两个更改，您的默认选择将运行