2017-04-07 70 views
0

<md-select/>没有显示甚至任何占位符代码时,我加入了placeholder="Select Type"Angularjs MD-选择不设置占位

<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

+0

我想当你添加'ng-model-options =“{trackBy:'$ value.id'}”'它会预先选择一个项目选项,所以占位符将被删除 –

+0

@sachilaranawaka它不可能都应该工作?当选择项目我必须执行操作和只有一个选项从数据库加载然后它是造成问题。 –

+0

你可以创建它的演示。 – Viplock

回答

0
<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 =”来取消选择。