ng-selected不使用ng-repeat处理选项元素

Question

我正在使用select组合框，其中包含来自OData响应的动态值。因此，我需要在回复中确定“最高”的现有期限，并为相关的selected项设置option属性。

此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（）”