Leandro Leandro - 2 months ago 13
AngularJS Question

ng-repeat not populating values at md-option

i'm using angular-material and i want place some years as value at

<md-option>
component, but, nothing happens when i put ng-repeat directive at
<md-option>
. here my code:

<div>
<md-card>

<md-card-content>
<div layout="row" layout-align="space-between start">
<md-select ng-model="history.userYear" placeholder="Selecione o ano" class="">
<md-option ng-value="year" ng-repeat="year in history.historyYears">
{{year}}
</md-option>
</md-select>
</div>
</md-card-content>

</md-card>
</div>


controller.js:

(function () {
'use strict';

angular
.module('myapp')
.controller('BulletinController', BulletinController);

function BulletinController() {

var vm = this;

vm.historyYears = historyYears;

function historyYears() {
var startYear = 2013,
currentYear = new Date().getFullYear(),
years = [];

while (startYear <= currentYear) {
years.push(startYear++);
}

return years;
}
}

}());


i need place a year range at my
<md-select>
, but it is not populated, i tried place "track by $index" too at my ng-repeat like this:
ng-repeat="year in history.historyYears track by $index"
, but that don't work.

Answer

Here you go - CodePen

Markup

<div ng-controller="AppCtrl as vm" ng-cloak="" ng-app="MyApp">
  <div>
      <md-card>
          <md-card-content>
              <div layout="row" layout-align="space-between start">
                  <md-select ng-model="history.userYear" placeholder="Selecione o ano" class="">
                    <md-option ng-value="year" ng-repeat="year in vm.history.historyYears">
                      {{year}}
                    </md-option>
                  </md-select>
              </div>
          </md-card-content>

      </md-card>
  </div>
</div>

JS

angular.module('MyApp',['ngMaterial', 'ngMessages'])

.controller('AppCtrl', function() {
  var vm = this;
  vm.history = {
    historyYears: historyYears()
  }

  function historyYears() {
    var startYear = 2013,
        currentYear = new Date().getFullYear(),
        years = [];

    while (startYear <= currentYear) {
      years.push(startYear++);
    }

    return years;
  }
});