值不显示在选择按钮

我想在选择按钮中获得选项，但它没有显示出来。值不显示在选择按钮

我的代码如下：

的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

值不显示在选择按钮

回答

相关问题