html - ng-selected 不适用于带有 ng-repeat 的选项元素

Question

我正在使用一个包含来自 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="">&lt;Alle&gt;</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="">&lt;Alle&gt;</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="">&lt;Alle&gt;</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>

Answer 1

ng-selected 不带表达式括号。使用

ng-selected="examResult.Period == getHighestPeriod()"