CODEWITHSUNDEEP
javascripthtmlangularjsmaterial-design
Sajeetharan
Sajeetharan

Reputation: 222720

why md-select does not get populated with angular?

I am using material select in my application, it worked with normal select when i use bootstrap. what is the issue here?. Here is the code,

HTML:

<md-select ng-model="widget.chartConfig.options.chart.type" >
        <md-option ng-value="t.title" data-ng-repeat="t in widget.chartTypes">{{ t.title }}</md-option>
</md-select>

App.js:

var app = angular.module('DemoApp', ['ngMaterial']);    
app.controller('MainCtrl', function($scope) {
    $scope.widget = [];
    $scope.widget.push(    
  {
     chartTypes:[
  {"id": "line", "title": "Line"},
  {"id": "spline", "title": "Smooth line"},
  {"id": "area", "title": "Area"},
  {"id": "areaspline", "title": "Smooth area"},
  {"id": "column", "title": "Column"},
  {"id": "bar", "title": "Bar"},
  {"id": "pie", "title": "Pie"},
  {"id": "scatter", "title": "Scatter"}
  ],
   chartConfig : {
    options: {
      chart: {         
        type:  "bar"
      }
  }
  }
  }
  );
});

Here is the Plunker;

Upvotes: 0

Views: 4335

Answers (2)

Pankaj Parkar
Pankaj Parkar

Reputation: 136194

You were missed to refer widget index widget ti widget[0] in both places

HTML

<md-select ng-model="widget[0].chartConfig.options.chart.type" >
        <md-option ng-value="t.title" data-ng-repeat="t in widget[0].chartTypes">{{ t.title }}</md-option>
</md-select>

Working Plukr

Upvotes: 1

Vinay K
Vinay K

Reputation: 5572

widget is any array. You need to replace widget with widget[0] Here is the updated plunker. http://plnkr.co/edit/MxfwsFafIky2L7VZguAE?p=preview

Upvotes: 2

Related Questions