简体   繁体   English

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

[英]Select dropdown not generated via ng-repeat and ng-options

The two dropdowns below doesnt generate an array of years. 下面的两个下拉列表不会产生年份数组。 I also need the years to be sorted from earliest to latest but the orderBy filter isnt working. 我还需要从最早到最新的年份进行排序,但是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>

Here is my javascript 这是我的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);

Here is my plunkr 这是我的朋克

You are using the wrong syntax for the ng-options and ng-repeat in the select options. 您在选择选项中对ng-options和ng-repeat使用了错误的语法。 Fixed here - http://plnkr.co/edit/oPI9kvQFuYJmrEwBDnWv?p=preview 在此处固定-http: //plnkr.co/edit/oPI9kvQFuYJmrEwBDnWv?p=preview

Also you need to assign your ng-models to the select for them to work (as mentioned in the comments above by @AvijitGupta) 另外,您还需要将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>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM