CODEWITHSUNDEEP
javascriptangularjsangular-material
user4332766
user4332766

Reputation:

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.

Upvotes: 0

Views: 255

Answers (1)

camden_kid
camden_kid

Reputation: 12813

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;
  }
});

Upvotes: 1

Related Questions