值没有出现在选择上 [英] values not showing up in select button

问题描述

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

I am trying to get options in select button but its not showing up.

我的code是如下：

index.html的：

index.html:

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

app.js：

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 的材料设计。
我也初始化，选择按他们说什么：

Before it was working fine and i was getting values in select options. but then I wanted to use material design from http://materializecss.com/about.html. I have also initialized "select" as per what they told :

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

Eventhough我收到值Html页面，我没有得到他们里面选择选项。请参考下面的code，我可以在浏览器中检查后见：

Eventhough I am getting values to html page, I am not getting them inside select options. please refer the below code which i can see after inspecting in browser:

    <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>

请让我知道我做错了。 code可在github上： https://github.com/pradeepb6/firstExample/树/主/应用

Please let me know what am I doing wrong. Code is available at github: https://github.com/pradeepb6/firstExample/tree/master/app

推荐答案

我解释如何解决它的这个问题。

基本上你需要创建一个指令，所有选择元素，它可以绑定到选择元素，并调用 $（元素）.material_select（）; 在它的连接功能。

Basically you need to create a directive for all select elements, it can be bound to the select element, and call $(element).material_select(); in its link function.

此外，自当从服务器附带的数据做也不会知道，你需要prevent从所有正在创建的选择。一个 ngIf 会做的伎俩。所以，你的选择会是这样的：

Also, since it won't know when the data that came from the server is done, you'll need to prevent the select from being created at all. a ngIf will do the trick. So your select will look like this:

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

至于指令，可以使用这个。 ）

这篇关于值没有出现在选择上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！