select 按钮中未显示值

Question

我试图在 select 按钮中获取选项，但它没有显示。

我的代码如下：

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

之前它工作正常，我在 select 选项中获取值。但后来我想使用 http://materializecss.com/about.html 的 material 设计。我也按照他们说的初始化了 "select" :

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

尽管我正在获取 html 页面的值，但我没有在 select 选项中获取它们。请参考下面的代码，我在浏览器中检查后可以看到：

    <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

Answer 1

我在 this issue 中解释了如何修复它。

基本上你需要为所有select元素创建一个指令，它可以绑定到select元素，并调用$(element).material_select(); 在其 link 函数中。

此外，由于它不知道来自服务器的数据何时完成，因此您需要完全阻止 select 的创建。 ngIf 就可以了。所以你的 select 看起来像这样：

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

至于指令，可以使用this one。我在即将投入生产的代码中使用它 ;)

Answer 2

当您 'dropdown'（双关语）使用默认浏览器方法访问 select 而不是 material 时，这总是有效：

<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

样式看起来不像 material，但是，您可以加入几行 CSS 来使其样式像 material，而不会遭受丢失的动态渲染能力。

select 按钮中未显示值

values not showing up in select button

materialize

angularjs