Question

我正在将UI代码从引导更改为内容。我正在使用angularjs和材料1.1.20。我不知道angularjs，但想学习。请在下面查看我需要更改为angularjs材料的代码。

我知道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材质下拉列表。

Answer 1

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

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引导到材料

1 个答案: