值未显示在选择按钮中答案

【问题标题】：values not showing up in select button值未显示在选择按钮中
【发布时间】：2015-04-01 23:17:48
【问题描述】：

我正在尝试获取选择按钮中的选项，但它没有显示出来。

我的代码如下：

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();});

尽管我正在获取 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

【问题讨论】：

标签： angularjs materialize

【解决方案1】：

我在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。我在即将投入生产的代码中使用它;)

【讨论】：

感谢您的回复。我使用了你提出的建议。如果我遗漏了什么，请参考我所做的并建议我。 link
@Pradeepb 你是如何初始化选择的？您是否使用我发布的指令（链接在我的代码示例下方）？如果它不起作用，请更新您的 Github 存储库，如有必要，我将分叉它并进行必要的更改。
是的。我根据指南使用 ('select').material_select() 初始化了选择。我已经更新了 Github 存储库。感谢您的宝贵时间
我分叉了你的项目并修复了代码。我只做了一次提交，所以请阅读它以获取详细信息/说明。代码是here。对不起，我花了这么长时间，但我只有回到家才有时间。
很棒的伙伴。非常感谢。 :)

【解决方案2】：

当您“下拉”（双关语）使用默认浏览器方法进行选择而不是具体化它时，这总是有效的：

<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 将其样式化为材质，而不会丢失缺少的动态渲染功能。

【讨论】：