Question

以下<md-select/>代码未显示任何占位符，即使我添加了placeholder="Select Type"

<md-select ng-model="ctrl.number" ng-model-options="{trackBy: '$value.id'}" placeholder="Select Type">
    <md-option ng-repeat="n in ctrl.numbers" ng-value="n">
      {{ n.value }}
    </md-option>
</md-select>

但它可以使用下面的代码

  <md-select ng-model="ctrl.number"  placeholder="Select Type">
    <md-select-label>{{ ctrl.number.value }}</md-select-label>
    <md-option ng-repeat="n in ctrl.numbers" ng-value="n">{{ n.value }}</md-option>
  </md-select>

JS代码

(function () {
  'use strict';
  angular
      .module('MyApp')
      .controller('AppCtrl', function() {
        var _this = this;

        _this.number = {id: 2, value: "Two"};
        _this.numbers = [
          {id: 0, value: "Zero"},
          {id: 1, value: "One"},
          {id: 2, value: "Two"},
          {id: 3, value: "Three"},
          {id: 4, value: "Four"},
          {id: 5, value: "Five"}
        ];
      });
})();

有人可以先让我知道有什么问题吗？在这种情况下如何设置placeholder？

Answer 1

<md-select ng-model="ctrl.number" ng-model-options="{trackBy: '$value.id'}" 
placeholder="Select Type">
<md-option value="">Select Type</md-option>
<md-option ng-repeat="n in ctrl.numbers" ng-value="n">
  {{ n.value }}
</md-option>`
</md-select>

您的代码运行正常。未选中时显示占位符。你应该添加＆＃34; md-option value =＆＃34;＆＃34;取消选择。

Angularjs md-select未设置占位符

1 个答案: