值不顯示在選擇按鈕

我想在選擇按鈕中獲得選項，但它沒有顯示出來。值不顯示在選擇按鈕

我的代碼如下：

的index.html：

<select ng-model="main.order" ng-options="order as order.title for order in main.orders"></select>

app.js：

$http.get('src/json/sortingKeys.json').success(function(response){ 
    vm.orders = response.orders; 
    vm.order = vm.orders[0]; 
    });

它工作正常，我在選擇選項獲取值之前。但後來我想用http://materializecss.com/about.html的材料設計。我也初始化「選擇」按他們說什麼：

$(document).ready(function(){ $('select').material_select();});

Eventhough我收到值的HTML頁面，我沒有得到他們裏面選擇選項。請參閱下面的代碼，我可以在瀏覽器中檢查後看到：

<div class="select-wrapper"><input class="select-dropdown" readonly="true" 
            data-activates="select-options-082235b8-d9be-505d-90ab-c4cc9b9bb765" value="" 
            type="text"><i class="mdi-navigation-arrow-drop-down"></i> 
    <select class="selectOptions ng-pristine ng-untouched ng-valid initialized" ng-model="main.order" 
     ng-options="order as order.title for order in main.orders"> 
    <option selected="selected" label="Year Ascending" value="object:16">Year Ascending</option> 
    <option label="Year Descending" value="object:17">Year Descending</option> 
    <option label="Title Ascending" value="object:18">Title Ascending</option> 
    <option label="Title Ascending" value="object:19">Title Ascending</option> 
</select> 
</div>

請讓我知道我做錯了什麼。代碼在github上可用：https://github.com/pradeepb6/firstExample/tree/master/app

來源

2015-04-01 Pradeepb

我解釋瞭如何在this issue中修復它。

基本上你需要爲所有select元素創建一個指令，它可以綁定到選擇元素，並在其鏈接函數中調用$(element).material_select();。

此外，由於它不知道從服務器傳出的數據何時完成，因此您需要防止根本不創建選擇。一個ngIf將做的伎倆。所以，你的選擇會是這樣的：

<select 
    ng-model="main.order" 
    ng-options="order as order.title for order in main.orders" 
    ng-if="main.orders"> 
</select>

至於指令，你可以使用this one。我用這個在我的代碼，將很快打出生產;）

來源

2015-04-02 03:12:30

感謝您的回覆。我使用了你建議的建議。請參考我做了什麼，並建議我如果我失去了一些東西。 [鏈接]（http://pastebin.com/kbNCNseu） – Pradeepb 2015-04-02 09:21:22

@Pradeepb你如何初始化選擇？你是否使用我發佈的指令（鏈接在我的代碼示例下面）？如果它不起作用，請更新您的Github存儲庫，並且如有必要，我會分叉它並進行必要的更改。 – 2015-04-02 11:54:17

是的。我根據指導原則初始化select（'select'）。material_select（）。我更新了Github存儲庫。感謝您的時間 – Pradeepb 2015-04-02 12:36:12

這恰好總是工作，當你「下拉」（雙關語意）使用默認瀏覽器的方法來選擇，而不是去實現它：

<select class="browser-default" ng-model="student.name"> 
    <option ng-repeat="item in students" value="{{ item.$id }}"> {{ item.name }} </option> 
</select>

帶走是class="browser-default"部分。請參見：http://materializecss.com/forms.html

樣式看起來不像材質，但是，您可以放入幾行CSS來將其設置爲材質樣式，而不會損失缺少的動態呈現功能。

來源

2016-07-18 19:07:01 Rexford

值不顯示在選擇按鈕

回答

相關問題