3

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

我的代码如下：

索引.html：

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

应用程序.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

4

2 回答 2

2

我解释了如何在这个问题中解决它。

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.

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>

As for the directive, you can use this one. I use this in my code that will soon hit production ;)

于 2015-04-02T03:12:30.453 回答
2

This happens to always work when you 'dropdown' (pun intended) to use the default browser approach to the select instead of materializing it:

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

The take away is the class="browser-default" part. See here: http://materializecss.com/forms.html

The styling doesn't look like material, however, you could drop in a couple of lines of CSS to style it up like material, without suffering the missing dynamic rendering capabilities.

于 2016-07-18T19:07:01.213 回答