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

时间:2016-09-23 08:09:51

标签: angularjs angularjs-directive angular-material javascript-framework angular-controller

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

我的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'];

请帮助解决可能出错的问题,并告诉我对此问题的任何建议。

1 个答案:

答案 0 :(得分:2)

你去了 - http://localhost:3002/ng2-material-select

标记

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