Angularjs md-select未设置占位符答案

【问题标题】：Angularjs md-select not set placeholderAngularjs md-select未设置占位符
【发布时间】：2017-04-07 09:34:26
【问题描述】：

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

<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？

【问题讨论】：

我认为当您添加ng-model-options="{trackBy: '$value.id'}" 时，它会在选项中预先选择一个项目。所以占位符将被删除
@sachilaranawaka 它不可能两者都应该工作？当在选择的项目上时，我必须执行操作且只有一个从DB加载的选项，那么它会导致问题。 span>
你能做一个演示吗？
如果您已经设置了模型 ctrl.number 并且该模型也存在于选项中，您怎么能期望它显示占位符
@SubodhJoshi 看到这个plnkr.co/edit/5v4ZtIimJA7VtWFqoJIV?p=preview

标签： javascript angularjs material-design angular-material

【解决方案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>

您的代码运行良好。未选中时显示占位符。您应该添加“md-option value="" 以取消选择。

【讨论】：

此建议在列表中创建一个可选选项，使用占位符时不需要该选项。