2017-04-07 86 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 =」來取消選擇。