选择不是通过ng-repeat和ng-options生成的下拉列表

时间:2016-01-04 16:46:39

标签: angularjs sorting angularjs-orderby

下面的两个下拉列表不会产生一系列年份。我还需要将年份从最早到最晚排序,但orderBy过滤器无法正常工作。

 <select title="- Select a period -" class="period " id="reportingPeriods">
        <option ng-repeat="reportingPeriod for reportingPeriod in reportingPeriods">{{reportingPeriod}}</option>
      </select>
      <br />
      <select title="- Select a period -" class="period selectpicker" id="" 
      ng-options="reportingPeriod for reportingPeriod in reportingPeriods | orderBy: '-reportingPeriod' ">
      </select>

这是我的javascript

(function(angular) {
  'use strict';
angular.module('ngrepeatSelect', [])
  .controller('ExampleController', ['$scope', function($scope) {
    console.clear();
    $scope.data = {
     repeatSelect: null,
     availableOptions: [
       {id: '1', name: 'Option A'},
       {id: '2', name: 'Option B'},
       {id: '3', name: 'Option C'}
     ],
    };

    $scope.reportingPeriods = [1999, 2011, 2000, 1988, 1995, 2014];
 }]);
})(window.angular);

这是我的plunkr

1 个答案:

答案 0 :(得分:0)

您在选项选项中使用了错误的ng-options和ng-repeat语法。已修复此问题 - http://plnkr.co/edit/oPI9kvQFuYJmrEwBDnWv?p=preview

此外,您还需要将ng模型分配给选择它们才能工作(如@AvijitGupta上面的评论所述)

<select ng-model="period" title="- Select a period -" class="period " id="reportingPeriods">
    <option ng-repeat="reportingPeriod in reportingPeriods">{{reportingPeriod}}</option>
  </select>
  <br />
  <select ng-model="preiod" title="- Select a period -" class="period selectpicker" id="" 
  ng-options="reportingPeriod for reportingPeriod in reportingPeriods | orderBy: '-' ">
  </select>