我正在使用一个包含来自 OData 响应的动态值的 select
组合框。因此,我需要在我的响应中确定“最高”的现有时间段,并为相关的 option
项目设置 selected
属性。
此select
用作句点过滤器。这就是为什么我还为“所有”期间添加了一个条目。这可以在示例中删除,并且不会影响行为。
Angular 似乎评估条件等是正确的,所以应该选择的元素获得属性 selected="selected"
和 ng-select="true"
.
尽管如此,浏览器默认选择 '' 而不是所选元素。即使我删除了所有时间段的选项,浏览器也会采用“空”元素,而不是具有 selected
属性的元素。
我检查了其他类似问题的答案,但没有一个有效,许多引用 ng-options
而不是 ng-repeat
。
更多信息
我正在使用 AngularJS v1.4.9 和 Chrome 48.0.2564.103 m
我使用相当大的 JSON 格式的 OData 响应作为数据源,因此我需要重写此处的代码以提供可执行示例。 如果有必要或需要,我会这样做。
由于其他原因,我不想在这里讨论,我不能使用 ng-options
,所以请不要建议。
HTML 片段 - 事后注释和缩进
排序、排序等的其他逻辑工作正常。
<select class="semester-selection" ng-model="selectedPeriod.Period_Nav.PeriodName">
<!-- This 'empty' option can be removed. ng-selected won't work then either -->
<option ng-selected="false" value=""><Alle></option>
<option ng-selected="{{examResult.Period == getHighestPeriod()}}"
ng-repeat="examResult in examResultData.results | uniquePeriod:'Period' | orderBy:'-Period'"
value="{{examResult.Period_Nav.PeriodName}}">
<!-- Debug information -->
{{examResult.Period_Nav.PeriodName}}
{{examResult.Period == getHighestPeriod()}}
{{getHighestPeriod()}}
</option>
</select>
通过 Angular JS 生成 HTML
生成的代码看起来不错,因为 selected="selected"
和 ng-select="true"
与所需元素一样。
<select class="semester-selection ng-pristine ng-valid ng-touched"
ng-model="selectedPeriod.Period_Nav.PeriodName">
<option value=""><Alle></option>
<!-- ngRepeat: examResult in examResultData.results | uniquePeriod:'Period' | orderBy:'-Period' -->
<option selected="selected" ng-selected="true" ng-repeat="examResult in examResultData.results | uniquePeriod:'Period' | orderBy:'-Period'" value="WiSe 2011/12" class="ng-binding ng-scope">
WiSe 2011/12
true
15014000
</option>
<!-- end ngRepeat: examResult in examResultData.results | uniquePeriod:'Period' | orderBy:'-Period' -->
<option ng-selected="false" ng-repeat="examResult in examResultData.results | uniquePeriod:'Period' | orderBy:'-Period'" value="SoSe 2007" class="ng-binding ng-scope">
SoSe 2007
false
15014000
</option><!-- end ngRepeat: examResult in examResultData.results | uniquePeriod:'Period' | orderBy:'-Period' -->
</select>
浏览器结果
当我在浏览器中打开页面时,组合框仍然没有激活 selected
值,而是第一个或空值。
用于测试/摆弄的减少样本
哦。这个简化的示例有效,所以我需要在代码的其他地方找到问题。
var app = angular.module('ExamResultList', [ ]);
app.controller('ExamResultController', ['$scope', function ($scope) {
// Simplified sample data -> this can contain 'duplicates'
$scope.examResultData = [
{PeriodName:'WiSe 15/16', Period:8}, // fake OData OrderBy -> Highest period is the first elem
{PeriodName:'SoSe 12', Period:1},
{PeriodName:'WiSe 12/13', Period:2},
{PeriodName:'WiSe 12/13', Period:2},
{PeriodName:'WiSe 12/13', Period:2},
{PeriodName:'SoSe 13', Period:3},
{PeriodName:'WiSe 13/14', Period:4},
{PeriodName:'SoSe 14', Period:5},
{PeriodName:'WiSe 14/15', Period:6},
{PeriodName:'SoSe 15', Period:7}
];
$scope.highestPeriod = 0;
$scope.getHighestPeriod = function() {
// first element has the highest period, because the OData request has a orderby expression
return $scope.examResultData[0].Period;
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ExamResultList" id="examResultListWrapper">
<div ng-controller="ExamResultController as ExamResCtrl" id="examResultList">
<select class="semester-selection">
<option ng-selected="false" value=""><Alle></option>
<option ng-selected="{{examResult.Period == getHighestPeriod()}}"
ng-repeat="examResult in examResultData"
value="{{examResult.PeriodName}}">
{{examResult.PeriodName}}
<!-- Debug info
{{examResult.Period == getHighestPeriod()}}
{{getHighestPeriod()}}
-->
</option>
</select>
</div>
</div>
最佳答案
ng-selected
不带表达式括号。使用
ng-selected="examResult.Period == getHighestPeriod()"
关于html - ng-selected 不适用于带有 ng-repeat 的选项元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35364574/