AngularJS 动态 select 在 ng-repeat 中使用 ng-options - 设置默认 selected 选项

Question

我想通过允许用户根据可用的属性名称列表定义任意数量的排序属性，实现对项目列表的动态排序。代码：

JavaScript（控制器）

$scope.data.sortInfo = {};
$scope.data.sortInfo.availableProperties = [
    { PropertyName: "ProjectName", PropertyDisplayName: "Name" },
    { PropertyName: "LastUpdateOnAnsiStr", PropertyDisplayName: "Updated" },
    { PropertyName: "LocationsStr", PropertyDisplayName: "Locations" }
];

// array of selected properties to sort by {Name: {property name}, Direction: {0 = ASC / 1 = DESC}, Priority: {index of sort field (auto filled)} }
$scope.data.sortInfo.selectedProperties = [
    { Name: "ProjectName", Direction: 0, Priority: 0 }
];

HTML

<td ng-repeat="currentSelectedProperty in data.sortInfo.selectedProperties track by $index">
     <!-- debug info -->
     {{currentSelectedProperty.Name}} - {{currentSelectedProperty.Direction}} - {{currentSelectedProperty.Priority}}

      <select ng-model="currentSelectedProperty.Name"
              ng-options="item as item.PropertyDisplayName for item in data.sortInfo.availableProperties track by item.PropertyName">
</td>

这样做，select 会正确显示和填充，但我没有选择 selected。我希望在下拉列表中显示 ProjectName。

此外，更改 select 中的值将正确更改调试字段中显示的信息（名称、方向和优先级），因此 ng-model 似乎可以正常工作。

我设法通过不使用 ng-options 和显式 ng-repeat 选项找到了解决方法：

<option ng-selected="{{item.PropertyName == currentSelectedProperty.Name}}" 
        ng-repeat="item in data.sortInfo.availableProperties"
        value="{{item.PropertyName}}">
   {{item.PropertyDisplayName}}
</option>

问题：我的 ng-options 方法有什么问题？

Angular 版本为 1.4.3.

谢谢！

Answer 1

使用 ng-init 或在您的控制器中设置默认值。

以前看过这个asked/answered问题how to use ng-option to set default value of select element

Answer 2

尝试下面，它应该工作：

<select ng-model="currentSelectedProperty.Name" ng-init="currentSelectedProperty.Name=data.sortInfo.availableProperties[0]" ng-options="item as item.PropertyDisplayName for item in data.sortInfo.availableProperties track by item.PropertyName">

Answer 3

试试这个，

$scope.data.sortInfo.selectedProperties =   $scope.data.sortInfo.availableProperties[0]

您的代码中的问题是您对可用属性和选定属性有不同的对象。

Answer 4

你可以简单地做：

<select ng-model="currentSelectedProperty"
              ng-options="item as item.PropertyDisplayName for item in data.sortInfo.availableProperties track by item.PropertyName">

原因： currentSelectedProperty 是一个可以映射到 item 的对象，它也是一个对象。由于对象包含在数组中，因此您需要通过 $index 来跟踪它。

AngularJS 动态 select 在 ng-repeat 中使用 ng-options - 设置默认 selected 选项

AngularJS dynamic select within ng-repeat using ng-options - set default selected option

angularjs

html-select

ng-repeat

default-selected