如何使用 md-select 使用数组数据？

Question

我正在使用 angularjs 和 angular material 来设计我的网页。我无法显示数组中存在的选项的值。

我的index.html

<md-input-container class="md-block" flex-gt-sm>
  <label>Level</label>
  {{levels|json}}
  <ul>
      <li ng-repeat="level in levels"> {{level.name}}</li><!--this is working-->
  </ul>
  <md-select ng-model="news.level">
       <md-option ng-repeat="level in levels"ng-value="level.name">
         {{level.name}}
        </md-option><!--this is not working-->
  </md-select>
</md-input-container>

在控制器中我有

$scope.levels=['Level one', 'Level two','Level Three'];

请帮忙指出可能出错的地方，并让我知道对此问题的任何建议。

Answer 1

给你 - CodePen

标记

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp">
  <md-input-container class="md-block" flex-gt-sm>
    <label>Level</label>
    <ul>
      <li ng-repeat="level in levels"> {{level.name}}</li>
    </ul>
    <md-select ng-model="news.level">
      <md-option ng-repeat="level in levels" ng-value="level.name">
        {{level.name}}
      </md-option>
    </md-select>
  </md-input-container>
</div>

JS

angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache', 'ngDialog'])

.controller('AppCtrl', function($scope) {
  $scope.levels = [{name:'Level one'}, {name:'Level two'}, {name:'Level Three'}];
});