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已正确显示并填充，但我没有选择任何选项。我希望下拉列表中显示ProjectName。

此外，更改选择中的值将正确更改调试字段（名称，方向和优先级）中的显示信息，因此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

尝试下面，它应该工作：

configure do
  set :protection, :except => :frame_options

Answer 2

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

请参阅之前提出/已回答的问题how to use ng-option to set default value of select element

Answer 3

试试这个，

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

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

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使用ng-options在ng-repeat中动态选择 - 设置默认选择选项

4 个答案: