AngularJS 动态 select 在 ng-repeat 中使用 ng-options - 设置默认 selected 选项
AngularJS dynamic select within ng-repeat using ng-options - set default selected option
我想通过允许用户根据可用的 属性 名称列表定义任意数量的排序属性,实现对项目列表的动态排序。代码:
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.
谢谢!
使用 ng-init
或在您的控制器中设置默认值。
以前看过这个asked/answered问题how to use ng-option to set default value of select element
尝试下面,它应该工作:
<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">
试试这个,
$scope.data.sortInfo.selectedProperties = $scope.data.sortInfo.availableProperties[0]
您的代码中的问题是您对可用属性和选定属性有不同的对象。
你可以简单地做:
<select ng-model="currentSelectedProperty"
ng-options="item as item.PropertyDisplayName for item in data.sortInfo.availableProperties track by item.PropertyName">
原因:
currentSelectedProperty 是一个可以映射到 item 的对象,它也是一个对象。由于对象包含在数组中,因此您需要通过 $index 来跟踪它。
我想通过允许用户根据可用的 属性 名称列表定义任意数量的排序属性,实现对项目列表的动态排序。代码:
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.
谢谢!
使用 ng-init
或在您的控制器中设置默认值。
以前看过这个asked/answered问题how to use ng-option to set default value of select element
尝试下面,它应该工作:
<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">
试试这个,
$scope.data.sortInfo.selectedProperties = $scope.data.sortInfo.availableProperties[0]
您的代码中的问题是您对可用属性和选定属性有不同的对象。
你可以简单地做:
<select ng-model="currentSelectedProperty"
ng-options="item as item.PropertyDisplayName for item in data.sortInfo.availableProperties track by item.PropertyName">
原因: currentSelectedProperty 是一个可以映射到 item 的对象,它也是一个对象。由于对象包含在数组中,因此您需要通过 $index 来跟踪它。