Angularjs Bootstrap to Material

Question

I am changing the UI code from bootstrap to material. I am using angularjs and material 1.1.20. I do not know angularjs but would like to learn. Please see the code I need to change to angularjs material below.

I know that md-select does not accept ng-options, but I do not have any idea how I can change it to work with md-select tag.

My background is designing HTML CSS but I want to learn more js and angular etc.

<div class="col-md-12 col-no-pad">
  <div class="input-group">
  <span class="input-group-addon" id="LANGUAGE">Language</span>
  <select name="LANGUAGE" class="form-control" tabindex="8"
                          ng-init="LANGUAGE = null"
                          ng-model="LANGUAGE"
                          ng-options="language.KEYID as language.DESC for language in languages">
 <option value="">-Select One-</option>
 </select>
</div>

js:

 dataService.getAll('language').then(function(data) {
    $scope.languages = data.data;
  });

I want it to work as an angularjs material dropdown.

Answer 1

You need to use ng-repeat on <md-option>. Check the snippet below.

angular.module('myApp', ['ngMaterial'])
  .controller('AppCtrl', function($scope) {
    $scope.languages = [{
      desc: 'English',
      keyid: 1,
      position: 5
    }, {
      desc: 'Italian',
      keyid: 2,
      position: null
    }, {
      desc: 'Spanish',
      keyid: 3,
      position: 43
    }, {
      desc: 'Malayalam',
      keyid: 4,
      position: 8
    }];
  });

md-input-container {
  min-width: 50%;
}

<link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-animate.js"></script>
<script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-aria.js"></script>

<div ng-app="myApp" ng-cloak ng-controller="AppCtrl as ctrl">
  <md-input-container>
    <label>Languages</label>
    <md-select ng-model="languageSelected">
      <md-option ng-repeat="item in languages" ng-value="item.keyid">
        {{ item.desc }}
      </md-option>
    </md-select>
  </md-input-container>
  <div>Your selection: {{ languageSelected || '--' }}</div>
  <div ng-repeat="item in languages" ng-if="item.keyid == languageSelected">
    <div>desc: {{ item.desc || '--' }}</div>
    <div>position: {{ item.position || '--' }}</div>
    <div>keyid: {{ item.keyid || '--' }}</div>
  </div>
</div>