Angularjs Bootstrap 至 Material

Question

我正在将 UI 代码从 bootstrap 更改为 material。我正在使用 angularjs 和 material 1.1.20。我不懂 angularjs 但想学习。请参阅下面我需要更改为 angularjs material 的代码。

我知道 md-select 不接受 ng-options，但我不知道如何更改它以使用 md-select 标签。

我的背景是设计 HTML CSS 但我想学习更多的 js 和 angular 等

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

我希望它作为 angularjs material 下拉菜单使用。

Answer 1

您需要在 <md-option> 上使用 ng-repeat。检查下面的代码段。

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>

Angularjs Bootstrap 至 Material

Angularjs Bootstrap to Material

angularjs

angularjs-material